This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
npm install tailwindcss -D | |
# -D installs it as a dev dependency |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from "react" | |
import tw from "tailwind.macro" | |
import styled from "@emotion/styled" | |
const MyComponent = styled.div` | |
${tw`bg-white | |
rounded-lg | |
overflow-hidden | |
border`} | |
height: 409px; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from "react" | |
import tw from "tailwind.macro" | |
const MyComponent = tw.div` | |
bg-white | |
rounded-lg | |
overflow-hidden | |
border | |
` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from "react"; | |
import tw from "tailwind.macro"; | |
const MyComponent = ( | |
<h4 css={tw`font-semibold text-lg leading-snug truncate`}>This is Soumya</h4> | |
); | |
export default MyComponent; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Edit the path to where you have kept the globals.css file | |
import "./src/styles/globals.css" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@tailwind base; | |
@tailwind utilities; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
plugins: [ | |
... | |
{ | |
resolve: `gatsby-plugin-postcss`, | |
options: { | |
// Accepts all options defined by `gatsby-plugin-postcss` plugin. | |
}, | |
}, | |
{ | |
resolve: `gatsby-plugin-emotion`, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
module.exports = { | |
plugins: [ | |
require("postcss-import")({ | |
plugins: [require("stylelint")], | |
}), | |
require("tailwindcss")("./tailwind.config.js"), | |
require("postcss-preset-env")({ | |
autoprefixer: { grid: true }, | |
features: { | |
"nesting-rules": true, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
npm i @emotion/core @emotion/styled tailwind.macro@next gatsby-plugin-postcss postcss-import postcss-preset-env | |
# We are installing the 'next' version of tailwind micro so as to use TailwindCSS 1.0.0+ | |
# For older versions of TailwindCSS, just install 'tailwind.macro' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# Install Tailwind: | |
npm install tailwindcss --save-dev | |
# Generate Tailwind config: | |
npx tailwind init |