TailWind CSS Introduction

Install Tailwind

First I need to initialize an npm project

npm init -y
npm install tailwindcss postcss-cli autoprefixer

Now we need to configure tailwind:

npx tailwind init 
//will generate tailwind.config.js

tailwind.config.js is the place to go if I want to configure tailwind to fit my personal needs.

Next I need to create postcss config file to specify what postcss plugin i'm going to use.

//postcss.config.js
module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer')
    ]
}

Now I need to create a file that I can process through these plugins. For example css/tailwind.css:

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

These markers will be replace by tailwind generated code, therefore for this file it will generate taiwind base style, components classes, utilities classes.

Now I need to script to make the whole work together. In package.json, in the script section:

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

-o is for specifying the output file. In my case I want it in public/build.

First taste of Tailwind

In an html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="build/tailwind.css" />
  </head>
  <body>
    <h1 class="text-4xl font-bold text-center text-blue-500">First taste of tailwind</h1>
  </body>
</html>

Composing tailwind utilities with apply

in tailwind.css:

@tailwind base;
@tailwind components;

.btn{
   @apply font-semibold sm-text-base text-white uppercase /*all my classes come here*/
}
.btn:active{
   @apply /*all my classes come here*/
}
.btn:hover{
   @apply /*all my classes come here*/
}
.btn:focus{
   @apply /*all my classes come here*/
}
@screen sm { /*same as @media(min-width:640px){ */
   .btn {
      @apply //my classes
   }
}


@tailwind utilities;

Careful, apply does not support the use of variants, aka sm: or hover: or active: etc....

Why do I declare my custom css between the components and the utilities ? so I can still use utilities classes on top of btn.

Customizing Tailwind

First to generate the default tailwind config file:

npx tailwind init tailwind-full.config.js --full

module.exports = {
  prefix: '',
  important: false,
  separator: ':',
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
    },
    colors: {
      transparent: 'transparent',
     .....
     .....
   }
}

The generated file contains all de the default configuration of tailwind. We can update it to meet our design needs.

The second approach which allow to see more clearly what is customized and what is the defauts is to start from the empty tailwind.config.js :

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

All the configuration done in this file will be merged with the default from tailwind:

module.exports = {
  theme: {
    extend: {
       colors: {
          'my-color': '#123456'
       }
    },
  },
  variants: {},
  plugins: [],
}

Remove unused css with purgecss

To remove all the unused css we can use purgecss. Let's install purgecss as a postcss plugin:

npm install @fullhuman/postcss-purgecss

Add purgecss to the postcss configuration:

//postcss.config.js
module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
        ...process.env.NODE_ENV === 'production' && require('@fullhuman/postcss-purgecss')({
           content:[
            './src/**/*.js',
            './index.html'
           ],
           defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
        })
    ] 
}

Create-react-app and TailwindCSS

First let's create an app using create react app:

yarn create react-app cra-tailwindcss 

Install tailwind:

yarn add tailwindcss -D

Initialize tailwind:

npx tailwind init tailwind.js --full

Install postcss and autoprefixer:

yarn add postcss-cli autoprefixer -D

Create the postcss configuration file

touch postcss.config.js
const tailwindcss = require("tailwindcss");
module.exports = {  plugins: [tailwindcss("./tailwind"), require("autoprefixer")]};

In app.js, remove all the boilerplate code:

import React from 'react';
function App() {
  return (
    <div>App</div>
  );
}

export default App;

In src, create styles/app.css and styles/tailwind.css. First in tailwind.css add:

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

Second, in the root file of the app, here app.js, import app.css:

import React from 'react';
import './styles/app.css'
function App() {
  return (
    <div>App</div>
  );
}

Edit the script section of package.json:

"scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/styles/tailwind.css -o src/styles/app.css",
    "watch:css": "postcss src/styles/tailwind.css -o src/styles/app.css -w"
  },