1. init
npm init -y npm install tailwindcss postcss-cli autoprefixer @fullhuman/postcss-purgecss -D npx tailwind init
2. postcss.config.js
const purgecss = require('@fullhuman/postcss-purgecss')({
content: [
'./src/**/*.html',
'./src/**/*.vue',
],
// whitelist: ['mdi-check'],
// whitelistPatterns: [/el-.+$/, /^area/, /^vue-treeselect/],
// whitelistPatternsChildren: [/el-.+$/],
defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
})
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
...process.env.NODE_ENV === 'production' ? [purgecss] : []
]
}
3. src/css/tailwind.css
@tailwind base; @tailwind components; @tailwind utilities;
4. package.json
"scripts": { "dev": "postcss src/css/tailwind.css -o public/css/all.css", "prod": "cross-env NODE_ENV=production postcss src/css/tailwind.css -o public/css/all.css" },
// windows
"scripts": { "dev": "set NODE_ENV=dev&&postcss ./tw.css -o ./static/css/all.css", "build": "set NODE_ENV=production&&postcss ./tw.css -o ./static/css/all.css" },
5. public/index.html
<title>index</title>
<link rel="stylesheet" href="./css/all.css">
<body>
<h1 class="text-xl font-bold text-blue-500 text-center">Hello World!</h1>
6. vue project
1) remove postcss config in package.json
2) add it in main.js
import '@/assets/css/tailwind.css'