How to set up a workflow to trim Tailwind CSS with PurgeCSS and simple PostCSS settings (Webpack not involved)
I recently started moving my blog CSS toTail wind.
Tailwind is an interesting framework because it does not provide a set of Bootstrap or other widgets, but providesPublic utilities.
I find that it resonates a lot with the way HTML is used.
I introduced my usageVue's tail windIn the last article, but there is no suitable build tool yet, it may be difficult to set the correct location correctly, I decided to write this blog post, even just to make me remember later
In this article, I explained how to combine Tailwind withanyA kind of project.
Install Tailwind
The first step is to install Tailwind using npm or yarn:
npm init -y
npm install tailwindcss
Create a configuration file
Next, use this command to create a configuration file:
npx tailwind init
This will create atailwind.config.js
Add the basic Tailwind configuration to the files in the project root directory.
Configure PostCSS
Now you need to adjustCSSConfigure to ensure Tailwind is running. Add to:
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer')
]
}
Give youpostcss.config.js
. If it does not exist, create one.
For convenience, I also added autoprefixer, you may need it. Install withnpm install autoprefixer
.
Oh, also make sure you have PostCSS installed (npm install -g postcss-cli
)
Create Tailwind CSS file
Now, create a CSS file in the desired location, for exampletailwind.css
And add
@tailwind base;
@tailwind components;
@tailwind utilities;
Create build command
Open yours nowpackage.json
File, if not, please add a script section:
"scripts": {
"build:css": "postcss src/tailwind.css -o static/dist/tailwind.css"
}
Build tail wind
Now run from the command linenpm run build:css
The final CSS file will be constructed.
The result file is instatic/dist/tailwind.css
(You can change the position in the command above).
Automatically regenerate CSS after changing files
Every time I change the theme HTML (stored inlayouts
Folder), I want to regenerate the CSS and trigger the clearing and shrinking that I set.
How can this be done?
installationwatch
npm package:
npm install watch
And addwatch
Script for youpackage.json
file. You already havebuild:css
From before, we only added a script to monitor the layouts folder and runbuild:css
Every time you change:
"scripts": {
"build:css": "postcss src/tailwind.css -o static/dist/tailwind.css",
"watch": "watch 'npm run build:css' ./layouts"
}
Run nownpm run watch
And you should go well!
Trim file size
If you check, the result file is very large. Even if you don’t use any Tailwind class in HTML, all frames will be included by default because this istailwind.js
file.
They decided to include everything to avoid people missing anything. This is a design choice. We need nowDelete stuff, It turns out that we can use purgecss to delete all unused CSS classes.
I also want to remove all comments from the CSS and make it as small as possible.csnanoIs what we are looking for.
We can automate these things! First, install these utilities:
npm install cssnano
npm install @fullhuman/postcss-purgecss
Then we add it to our PostCSS configuration filepostcss.config.js
:
const purgecss = require('@fullhuman/postcss-purgecss')
const cssnano = require('cssnano')
module.exports = {
plugins: [
require(‘tailwindcss’),
require(‘autoprefixer’),
cssnano({
preset: ‘default’
}),
purgecss({
content: [’./layouts//*.html’, './src//.vue’, './src/**/.jsx’],
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
})
]
}
During development, avoid excessive processing
why? Every step you add will slow down the feedback cycle in the development process. I use this configuration to only add prefixes in production and remove comments:
postcss.config.js
const purgecss = require('@fullhuman/postcss-purgecss')
const cssnano = require('cssnano')
module.exports = {
plugins: [
require(‘tailwindcss’),
process.env.NODE_ENV === ‘production’ ? require(‘autoprefixer’) : null,
process.env.NODE_ENV === ‘production’
? cssnano({ preset: ‘default’ })
: null,
purgecss({
content: [’./layouts//*.html’, './src//.vue’, './src/**/.jsx’],
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
})
]
}
Download mine for freeCSS Manual
More CSS tutorials:
- Flexbox guide
- CSS grid tutorial
- CSS variables (custom attributes)
- Introduction to PostCSS
- CSS guarantees metallicity
- How to center an element using CSS
- CSS system fonts
- How to print HTML with styles
- Getting started with CSS transition
- CSS animation tutorial
- Introduction to CSS
- CSS guide
- How to set up Tailwind with PurgeCSS and PostCSS
- Tail wind cheat sheet
- How to continuously rotate an image using CSS
- Use CSS to make the table responsive
- How to debug CSS by halving
- CSS selector
- CSS cascade
- CSS specificity
- CSS attribute selector
- CSS colors
- CSS Unit
- CSS url()
- CSS typography
- CSS Box model
- CSS position properties
- CSS media queries and responsive design
- CSS function query
- CSS conversion
- How to style a list with CSS
- CSS vendor prefix
- CSS inheritance
- CSS pseudo-classes
- CSS pseudo elements
- Style HTML tables with CSS
- CSS Display property
- CSS calc() function
- CSS border
- Use @import to import CSS files
- CSS error handling
- CSS filter
- CSS Box size
- CSS background
- CSS comments
- CSS fonts
- CSS padding
- CSS float property and clear
- CSS normalization
- CSS z-index property
- How to disable text selection using CSS
- How to use CSS to place items at the bottom of their container
- How to invert colors using CSS
- Responsive front tags in CSS
- Responsive YouTube video embedding
- What is a good CSS breakpoint value for responsive design?
- How to align the center in Flexbox