Use Tailwind on any project.

Create a directory for the project

In terminal:

mkdir project
cd project

Install tailwind, autoprefixer and purgecss-cli:

npm install tailwindcss autoprefixer purgecss-cli

Create a css file with tailwind directives

mkdir css
cd css
touch tailwind.css
nano tailwind.css

Paste this tailwind directives in the file

@tailwind base;

@tailwind components;

@tailwind utilities;

To save a file with nano editor just press (ctrl + x) then press (y).

Create tailwind config file:

npx tailwindcss init

Create a postcss file

touch postcss.config.js

Inside the file add the next modules:

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

Create a build command:

Go to your package.json file and in "scripts" key add the next line:

"build": "npx tailwindcss build css/tailwind.css -o css/styles.css"

This file will get the content of "css/tailwind.css" and build a usable css file in "css/styles.css", this is an example you can change the path as you need just remember add the correct path for the file with the tailwind directives.

Compile the code and get just the css classes needed.

Tailwind now has purgecss added this makes even easy to compile and reduce the size of your css, just go to your tailwind.config.js file and add a purgecss config as you need:

module.exports = {
  purge: {
    mode: 'all',
    content: [
      './*.html',
    ],
  },
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

To compile the project just go to the terminal and execute:

NODE_ENV=production npm run build

In my case I need that purgecss compile my css classes just from index.html, thats why my content array has just a simple rule to get all files with "html" type, but maybe you would have some ".vue" files or anyother.

The mode key, its not really necessary and even not recommended to use this mode, purge reduce a lot the size without this mode, in my case I really need only the specific classes because I want to add them on a "style" tag for my email "html" template.

Thanks for reading.