Setting Up Tailwind

4 years ago - November 16, 2019

TailwindPostCSSCSSProgramming Notes

Setup

Create a directory then:

npm init -y

Install these dependencies:

npm install tailwindcss postcss-cli autoprefixer

npx tailwind init (It creates an empty tailwind.config.js file in the project root):

module.exports = {
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
}

Create a postcss.config.js in the root of the project:

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

Create a CSS file that runs through the above process: css/tailwind.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Create a script to process the CSS through our list of PostCSS plugins:

"scripts": {
    "build": "postcss css/tailwind.css -o public/build/tailwind.css"
},

Run the command: npm run build; A new CSS file is generated that has been processed through the PostCSS.
Add an HTML file in public/index.html and use the tailwind classes:

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Tailwindcss</title>
    <link rel="stylesheet" href="./build/tailwind.css" />
  </head>
  <body>
    <h1 class="text-4xl font-bold text-center text-blue-400">Hello World!</h1>
  </body>
</html>

Tailwind CSS Intellisense for intelligent auto-completion in VS Code

Hover

<a class="bg-indigo-500 hover:bg-indigo-400" href="#">Book your escape</a>

Responsive design:

Out of the box Tailwind ships with four default breakpoints:

sm which kicks in at 640
md which kicks in at 768
lg which kicks in at 1024
xl which kicks in at 1280

<div class="mt-4 sm:mt-6 md:mt-4"></div>

Composing Utilities with `@apply`:

Change tailwind.css file:

@tailwind base;
@tailwind components;

.btn {
  @apply inline-block bg-indigo-500 text-white px-5 py-3 rounded-lg shadow-lg uppercase tracking-wider font-semibold text-sm;
}
.btn:hover {
  @apply bg-indigo-400;
}
.btn:focus {
  @apply outline-none shadow-outline;
}
.btn:active {
  @apply bg-indigo-600;
}
@screen sm {
  .btn {
    @apply text-base;
  }
}

@tailwind utilities;

Add watch script for CSS files:

"scripts": {
  "watch": "postcss css/tailwind.css -o public/build/tailwind.css --watch"
},

Adding Tailwind to a React project

npx create-react-app tailwind
cd tailwind
npm install tailwindcss postcss-cli autoprefixer
touch postcss.config.js:

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

touch tailwind.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Add build script:

"scripts": {
    "build:css": "postcss ./tailwind.css -o src/css/style.css",
},

Update public/index.html:

<body class="w-full bg-purple-100">

Install concurrently for watching tailwind.css changes:

"scripts": {
    "dev": "concurrently \"yarn watch:css\" \"yarn start\"",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "watch:css": "onchange 'tailwind.css' -- yarn build:css",
    "build:css": "postcss ./tailwind.css -o src/css/style.css",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },