너 바보 아니야

使用Tailwind CSS新建一个项目

2021-11-18

tailwindcss

中文官网: [ 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
2
3
4
5
6
7
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}

创建您的配置文件
运行以下命令

npm init -y

安装PostCSS
新建一个项目目录,然后在根目录运行

1
npm i --save-dev postcss-cli

这会在根目录下生成一个package.json文件。
继续运行

npx tailwindcss init

这会在你的项目根目录创建一个tailwind.config.js文件,将内容修改为以下:

1
2
3
4
5
6
7
8
9
10
// tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {},
plugins: [],
}

创建你的css文件
创建一个css文件,位置随意,比如src/style.css,并且将内容修改为如下:

1
2
3
4
/* ./你的css文件夹/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

创建构建命令
现在打开 package.json 文件,添加以下运行脚本:

1
2
3
"scripts": {
"build": "postcss src/style.css -o dist/tailwind.css"
}

这个构建的css文件就是你最终使用的css文件。
现在,从命令行运行 npm run build 将构建最终的CSS文件。

生成的文件位于 dist/tailwind.css (您可以在上面的命令中更改位置)。

然后在你的html文件中引用这个css文件就可以。

更改文件后自动重新生成CSS
如果你想要每次修改文件后,自动重新生成一下css文件,比如你在style.css里自定义了一个组件,并且希望实时生效,那么就需要用到监听。
现在打开 package.json 文件,添加以下运行脚本:

1
2
3
"scripts": {
"watch": "postcss build src/css/tailwind.css -o dist/css/tailwind.css --watch",
}

现在 package.json 文件的脚本部分变成了这样:

1
2
3
4
"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就可以自动监听你的页面改动.

babel 简单来说把 JavaScript 中 es2015/2016/2017/2046 的新语法转化为 es5,让低端运行环境(如浏览器和 node )能够认识并执行

使用支付宝打赏
使用微信打赏

欢迎点击上方按钮对我打赏,谢谢你给我吃糖果