TailwindCSS – TailwindCSS安装和开发环境配置
1 TailwindCSS安装和开发环境配置
TailwindCSS提供了官方的安装教程，目前推荐的是使用TailwindCLI的方式，也就是通过npm或者独立的tailwindcss程序安装和配置开发环境。
1.1 安装Node.js
由于要使用npm，所以需要首先安装Node.js，本文就不再赘述。
1.2 安装TailwindCSS
在安装完Node.js之后，打开终端，输入以下命令安装TailwindCSS
npm install -D tailwindcss postcss autoprefixer
执行完命令之后会在目录下生成package.json和package-lock.json两个文件。
1.3 配置TailwindCSS项目开发环境
新建一个项目文件夹TailwindCSSLearn，在该文件夹下使用终端执行以下命令
npx tailwindcss init
命令执行完成之后会在该项目目录下生成一个tailwind.config.js文件，内容如下
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}
在上面的content字段中配置使用TailwindCSS的文件模板信息，比如我们想要当前目录下的所有html文件中使用TailwindCSS，则将上述内容修改如下
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./*.html"],
theme: {
extend: {},
},
plugins: [],
}
如果想要当前目录下的所有html文件和js中使用TailwindCSS，则进行如下修改
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
修改完成后，我们在项目目录下创建一个src/input.css文件，在该文件中引入Tailwind CSS的样式定义，文件内容如下
@tailwind base;
@tailwind components;
@tailwind utilities;
之后新建一个postcss.config.js文件，在文件中增加以下内容
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
然后在package.json文件中增加以下内容，
{
"devDependencies": {
"autoprefixer": "^10.4.17",
"postcss": "^8.4.33",
"tailwindcss": "^3.4.1"
},
"scripts": {
"dev": "npx tailwindcss -i ./src/input.css -o ./src/output.css --watch"
}
}
然后在终端执行以下命令
npm run dev
通过上述命令会实时扫描在tailwind.config.js所定义的模板文件，也就是当前项目目录下的html文件，然后通过TailwindCSS重建在html中所使用的css属性，并在src目录下生成output.css文件，所以我们在html中只需要引用这个文件output.css文件就可以使用TailwindCSS中的属性。
然后在项目文件下创建一个index.html文件，在文件中新增如下代码
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./src/output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello World!
</h1>
</body>
</html>
然后在浏览器中打开html文件就可以看到带着下划线的Hello World!。
如果项目开发完成，你想要最小化的css文件，可以使用以下命令生成最小化的css文件
npx tailwindcss -i ./src/input.css -o ./src/output.css --minify
在生产环境中使用最小化css有利于节省网络带宽、流量，加快网站打开速度。
参考
欢迎扫码关注我的微信公众号，及时获取文章更新
本文作者：StubbornHuang
版权声明：本文为站长原创文章，如果转载请注明原文链接！
原文标题：TailwindCSS – TailwindCSS安装和开发环境配置
原文链接：https://www.stubbornhuang.com/2969/
发布于：2024年01月25日 11:15:51
修改于：2024年01月29日 14:33:49
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
评论
72