DEV Community

Cover image for Use Tailwind on any project.
Ariel Mejia
Ariel Mejia

Posted on • Updated on

Use Tailwind on any project.

Create a directory for the project

In terminal:

mkdir project
cd project
Enter fullscreen mode Exit fullscreen mode

Install tailwind, autoprefixer and purgecss-cli:

npm install tailwindcss autoprefixer purgecss-cli
Enter fullscreen mode Exit fullscreen mode

Create a css file with tailwind directives

mkdir css
cd css
touch tailwind.css
nano tailwind.css
Enter fullscreen mode Exit fullscreen mode

Paste this tailwind directives in the file

@tailwind base;

@tailwind components;

@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

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

Create tailwind config file:

npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

Create a postcss file

touch postcss.config.js
Enter fullscreen mode Exit fullscreen mode

Inside the file add the next modules:

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

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"
Enter fullscreen mode Exit fullscreen mode

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: [],
}

Enter fullscreen mode Exit fullscreen mode

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

NODE_ENV=production npm run build
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)