How to use Tailwind CSS in the Vue.js project

You have successfully started a Vue project (we have written how it works here) and now you want to use TailwindCSS as a utility framework for development? Then in the following article, we will show you how you can do this relatively easily.

First, you have to install the necessary packages:

npm install tailwindcss autoprefixer
-- ODER --
yarn add tailwindcss autoprefixer

Then you can create the tailwindcss.config.js file in your project with the following command:

npx tailwind init

Once that’s done, you can create a new / css folder under assets and create the tailwind.css file there. Here you add the following imports:

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

Now we have to tell the Vue app that the CSS styles should be used. To do this, we import our new tailwind.css into the App.vue.

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

In the last step, we adapt our postcss.config.js. So we state that we want to use both plugins.

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

Once that’s done, we can check that everything works. It’s best to add a Tailwind CSS class like bg-red-500 to a div in App.vue and see if you can see the change after the live reload. Does everything fit? Perfect, then you have successfully added TailwindCSS to your project.

Optimize bundle size

Tailwind increases your CSS immensely. So if you run npm run build you should see the change. The CSS is now over 679 KiB. However, we can reduce that relatively easily.

File                                      Size             Gzipped

dist/js/chunk-vendors.9080b304.js         119.90 KiB       41.68 KiB
dist/js/app.d8b6098b.js                   7.19 KiB         2.58 KiB
dist/service-worker.js                    0.96 KiB         0.54 KiB
dist/js/about.edf670de.js                 0.44 KiB         0.31 KiB
dist/css/app.6504396d.css                 679.39 KiB       85.10 KiB

To remove unused Tailwind CSS classes from your bundle, we use PurgeCSS in conjunction with PostCSS. To do this, first add the necessary package to the project:

npm install purgecss  @fullhuman/postcss-purgecss

Once the installation is complete, we have to make the following change in the PostCSS Config:

const purgecss = require(“@fullhuman/postcss-purgecss”);

module.exports = {
    plugins: [
      require(‘tailwindcss’),
      require(‘autoprefixer’),

    // Only add purgecss in production
    process.env.NODE_ENV === 'production'
      ? purgecss({
          content: ['./src/**/*.html', './src/**/*.vue'],
        })
      : '',
  ],
}

If we now start npm run build again, we should already see drastic improvements in the CSS file.

File                                      Size             Gzipped

dist/js/chunk-vendors.9080b304.js         119.90 KiB       41.68 KiB
dist/js/app.d8b6098b.js                   7.19 KiB         2.58 KiB
dist/service-worker.js                    0.96 KiB         0.55 KiB
dist/js/about.edf670de.js                 0.44 KiB         0.31 KiB
dist/css/app.69044861.css                 2.14 KiB         0.81 KiB

2.14 KiB so you can start!

Link: TailwindCSS (https://tailwindcss.com/)