Inspire - Capo Productions
使用方式
方式一:通过 postcss 命令行方式使用
npm i postcss postcss-cli tailwindcss -D
|-- tailwind-test
|-- index.css
|-- package-lock.json
|-- package.json
index.css
css
@tailwind base;
@tailwind components;
@tailwind utilities;
执行 npx postcss index.css --use tailwindcss -d build/
,将会生成 build/index.css
文件
方式二:通过构建工具(如 Webpakc)配置 PostCSS
npm i postcss autoprefixer tailwindcss css-loader style-loader postcss-loader -D
npm i webpack webpack-cli -D
npm i css-loader style-loader postcss-loader -D
|-- tailwind-test
|-- package-lock.json
|-- package.json
|-- postcss.config.js
|-- tailwind.config.js
|-- webpack.config.js
|-- dist
| |-- index.html
|-- src
|-- index.js
|-- index.css
webpack.config.js
js
const path = require('path')
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader', 'postcss-loader']
}
]
}
}
postcss.config.js
js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
}
tailwind.config.js
js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
index.html
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
</head>
<body>
<div class="text-center">hello</div>
<script src="./main.js"></script>
</body>
</html>
执行 npx webpack
,dist 目录下生成 main.js 文件,文件大小为 4160KB。
生产优化
修改 tailwind.config.js 如下:
js
module.exports = {
purge: [
'./dist/**/*.html' // 指定模板文件,告诉 Tailwind 使用了哪些功能类,从而删除未使用的类
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
然后执行 npx webpack --node-env production
, 生成的 main.js 文件大小为 17KB