geekysrm

// tailwind.config.js
module.exports = {
  future: {},
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

geekysrm

npm install tailwindcss -D
# -D installs it as a dev dependency

geekysrm

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;

geekysrm

import React from "react"
import tw from "tailwind.macro"

const MyComponent = tw.div`
  bg-white
  rounded-lg
  overflow-hidden
  border
`

geekysrm

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;

geekysrm

// Edit the path to where you have kept the globals.css file
import "./src/styles/globals.css"

geekysrm

@tailwind base;
@tailwind utilities;

geekysrm

plugins: [
  ...
    {
      resolve: `gatsby-plugin-postcss`,
      options: {
        // Accepts all options defined by `gatsby-plugin-postcss` plugin.
      },
    },
   {
      resolve: `gatsby-plugin-emotion`,

geekysrm

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'

geekysrm

# Install Tailwind:
npm install tailwindcss --save-dev 

# Generate Tailwind config:
npx tailwind init