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!