此贴的安装说明仅适用于tailwindcss 2的版本,但时隔一年, tailwindcss 3 已经发布,此贴中的安装方式已经不再适用。
这几天陆续有一些朋友咨询怎么让Tailwind CSS开始工作。不知道怎么使用Tailwind,这篇教程给大家做一个详细的说明。
直接开始。
安装PostCSS
新建一个项目目录,然后在根目录运行
npm i --save-dev postcss-cli
安装Tailwind CSS以及相关依赖
npm install tailwindcss@latest postcss@latest autoprefixer@latest
添加Tailwind作为PostCSS插件
在根目录新建一个postcss配置文件postcss.config.js
,并且将文件内容修改为以下:
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
创建您的配置文件
运行以下命令
npm init -y
这会在根目录下生成一个package.json
文件。
继续运行
npx tailwindcss init
这会在你的项目根目录创建一个tailwind.config.js
文件,将内容修改为以下:
// tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {},
plugins: [],
}
创建你的css文件
创建一个css文件,位置随意,比如src/style.css
,并且将内容修改为如下:
/* ./你的css文件夹/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
创建构建命令
现在打开 package.json
文件,添加以下运行脚本:
"scripts": {
"build": "postcss src/style.css -o dist/tailwind.css"
}
创建Tailwind CSS
这个构建的css文件就是你最终使用的css文件。
现在,从命令行运行 npm run build
将构建最终的CSS文件。
生成的文件位于 dist/tailwind.css
(您可以在上面的命令中更改位置)。
然后在你的html文件中引用这个css文件就可以。
更改文件后自动重新生成CSS
如果你想要每次修改文件后,自动重新生成一下css文件,比如你在style.css
里自定义了一个组件,并且希望实时生效,那么就需要用到监听。
现在打开 package.json
文件,添加以下运行脚本:
"scripts": {
"watch": "postcss build src/css/tailwind.css -o dist/css/tailwind.css --watch",
}
现在 package.json
文件的脚本部分变成了这样:
"scripts": {
"build": "tailwindcss build src/css/tailwind.css -o dist/css/tailwind.css",
"watch": "postcss build src/css/tailwind.css -o dist/css/tailwind.css --watch",
},
这时候只要运行npm run watch
就可以自动监听你的页面改动。
优化Tailwind CSS文件大小
上面编译出来的Tailwind是完整的css文件,总共18万行css代码,文件将近4M。但是我们实际的项目,其实根本用不着所有Tailwind CSS自带的样式,所以这时候,我们就需要优化一下,我们希望最终打包的时候,css只编译我们用到的部分,用不到的自动删除掉。
这时候需要配置一下tailwind.config.js
:
// tailwind.config.js
module.exports = {
purge: [
'./src/*.html',
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {},
plugins: [],
}
可以看到我们在 "purge "选项内增加了一个文件路径。意思就是打包的时候,检查这个路径下的这些文件,然后自动删除这些文件没用到的css。路径这里可以使用通配符,更详细的教程可以看 http://tailwind.wyz.xyz/docs/optimizing-for-production
现在打开 package.json
文件,添加以下运行脚本:
"scripts": {
"build:css": "cross-env NODE_ENV=production postcss src/css/tailwind.css -o dist/css/tailwind.css"
}
现在 package.json
文件的脚本部分变成了这样:
"scripts": {
"build": "tailwindcss build src/css/tailwind.css -o dist/css/tailwind.css",
"watch": "postcss build src/css/tailwind.css -o dist/css/tailwind.css --watch",
"build:css": "cross-env NODE_ENV=production postcss src/css/tailwind.css -o dist/css/tailwind.css"
},
因为这条命令需要用到cross-env
,所以安装一下:
npm i cross-env --save-dev
在整个项目完成之后,运行npm run build:css
,会自动构建一个最小的css文件。切记这条命令在所有项目完成后运行,如果在你项目开发阶段运行。会造成,你之后新增加的css类,在之前构建的css中不存在,因为被你优化掉了。所以在项目开发阶段,只需要运行npm run watch
就可以。
自动刷新HTML文件
这是个题外话,不属于Tailwind CSS的范畴,如果你在写静态页面的时候,需要每次修改html页面,浏览器就自动刷新这个页面,那么只需要在vscode内搜索Live Server
并且安装,之后在你需要预览的页面,右键,选择Open with Live Server
即可。