Setup TailwindCSS

TailwindCSS

A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

TailwindCSS allows front-end developers to increase working performance by just focusing on writing the markup files and no need to write a separate CSS file anymore which will save tons of time mapping the class names.

Setup TailwindCSS

Below are all the steps that you need to do to setup TailwindCSS for your React project:

• Install Tailwind CSS

Install tailwindcss and its peer dependencies via npm, and then run the init command to generate the config files tailwind.config.js and postcss.config.js

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

• Configure template paths

Add the paths to all of your template files in your tailwind.config.js file. This step will tell Tailwind which files it should look for Tailwind classes.

/** @type {import('tailwindcss').Config} */

module.exports = {
  // template paths
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

• Add the Tailwind directives to CSS

Add the @tailwind directives for each of Tailwind's layers to your global.css file

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

And voila, you can now use Tailwind's utility classes in your project

TailwindCSS Config

Below are some common TailwindCSS configs you might want to take a look:

• theme: this config allows you to make changes to global styles like fontFamily, fontSize, colors,...If a style is directly under theme, it will replace the default style, to extend the default style without overriding it, you can put styles under extend property

// Example
const colors = require("tailwindcss/colors")

module.exports = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx}",
    "./src/components/**/*.{js,ts,jsx,tsx}",
    "./src/contexts/**/*.{js,ts,jsx,tsx}",
    "./src/hooks/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    fontFamily: {
      sans: ["Inter", "system-ui", "sans-serif"],
    },
    extend: {
      primary: {
        ...colors.orange,
        350: "#FF9900",
        250: "#F8D49F",
      },
      lightblue: colors.sky,
      orange: {
        ...colors.orange,
        350: "#FF9900",
        250: "#F8D49F",
      },
    }
  }
}

• plugins: Not all the classes on TailwindCSS website are available by default, some required you to install a plugin to make it work. This config is where you plug it in, install the plugin by using npm install and require the installed plugin here.

npm install @tailwindcss/typography

module.exports = {
  ...
  plugins: [
    require("@tailwindcss/typography")
  ]
}

• safelist: The way TailwindCSS works is when bundling, Tailwind will look through all the source code for TailwindCSS classes, and put only those classes into the bundle instead of a huge amount of all available classes. So sometimes when you want to generate classes based on variables like focus:border-${color}, TailwindCSS doesn't know the real class name yet so it will not work. To make it work, TailwindCSS create this safelist config so you can put all the generated classes here and they will be put in the bundle later.

module.exports = {
  ...
  safelist: [
    "focus:border-primary-350",
    "focus:ring-white",
    "focus:ring-offset-2",
    "focus:ring-offset-primary-250",
  ]
}