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"
import styled from "@emotion/styled"

const MyComponent = styled.div`
  ${tw`bg-white
  rounded-lg
  overflow-hidden
  border`}
  height: 409px;

geekysrm

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

geekysrm

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

geekysrm

@tailwind base;

@tailwind components;

@tailwind utilities;

geekysrm

module.exports = {
  plugins: [
    // ...
    require("tailwindcss"),
    require("autoprefixer"),
    // ...
  ],
};

geekysrm

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      indigo: '#5c6ac4',
      blue: '#007ace',
      red: '#de3618',
    }
  }

geekysrm

<p class="font-bold lg:font-semibold">
  Hello, I am a paragaph styled using Tailwind CSS.
</p>

geekysrm

<button class="px-4 py-2 font-semibold bg-blue-400 rounded">Click Me</button>

geekysrm

<div class="md:flex">
  <div class="md:flex-shrink-0">
    <img
      class="rounded-lg md:w-56"
      src="https://bit.ly/34e2djy"
      alt="Woman paying for a purchase"
    />
  </div>
  <div class="mt-4 md:mt-0 md:ml-6">
    <div class="text-sm font-bold tracking-wide text-indigo-600 uppercase">