中文官网: [ Tailwind-CSS中文官网 ]
Github地址: [ Github ]
安装PostCSS
新建一个项目目录,然后在根目录运行
1 | npm i --save-dev postcss-cli |
了解Sass,Less,Stylus等css 预处理器区别及使用、了解Just-In-Time(Jit)即时动态编译
安装Tailwind CSS以及相关依赖
npm install tailwindcss@latest postcss@latest autoprefixer@latest
添加Tailwind作为PostCSS插件
在根目录新建一个postcss配置文件postcss.config.js,并且将文件内容修改为以下:
1 | // postcss.config.js |
创建您的配置文件
运行以下命令
npm init -y
安装PostCSS
新建一个项目目录,然后在根目录运行
1 | npm i --save-dev postcss-cli |
这会在根目录下生成一个package.json文件。
继续运行
npx tailwindcss init
这会在你的项目根目录创建一个tailwind.config.js文件,将内容修改为以下:
1 | // tailwind.config.js |
创建你的css文件
创建一个css文件,位置随意,比如src/style.css,并且将内容修改为如下:
1 | /* ./你的css文件夹/styles.css */ |
创建构建命令
现在打开 package.json 文件,添加以下运行脚本:
1 | "scripts": { |
这个构建的css文件就是你最终使用的css文件。
现在,从命令行运行 npm run build
将构建最终的CSS文件。
生成的文件位于 dist/tailwind.css
(您可以在上面的命令中更改位置)。
然后在你的html文件中引用这个css文件就可以。
更改文件后自动重新生成CSS
如果你想要每次修改文件后,自动重新生成一下css文件,比如你在style.css里自定义了一个组件,并且希望实时生效,那么就需要用到监听。
现在打开 package.json 文件,添加以下运行脚本:
1 | "scripts": { |
现在 package.json 文件的脚本部分变成了这样:
1 | "scripts": { |
这时候只要运行npm run watch就可以自动监听你的页面改动.
babel 简单来说把 JavaScript 中 es2015/2016/2017/2046 的新语法转化为 es5,让低端运行环境(如浏览器和 node )能够认识并执行
欢迎点击上方按钮对我打赏,谢谢你给我吃糖果