51工具盒子Tailwind CSS 是一个实用优先的 CSS 框架，旨在通过一系列预定义的类名来快速构建用户界面。
与传统的 CSS 框架不同的是，Tailwind CSS 不提供任何现成的组件或设计，而是通过一组小而分离的实用类来直接在 HTML 中应用样式。
安装Node.JS {#%E5%AE%89%E8%A3%85node.js}
前往 Node.js 官方网站 并下载适合你操作系统的 Node.js 安装程序。
检查Node.js {#%E6%A3%80%E6%9F%A5node.js}
node -v
检查NPM {#%E6%A3%80%E6%9F%A5npm}
npm -v
更新NPM {#%E6%9B%B4%E6%96%B0npm}
npm install -g npm
Tainlwind安装配置 {#tainlwind%E5%AE%89%E8%A3%85%E9%85%8D%E7%BD%AE}
从头开始使用 Tailwind CSS 的最简单、最快捷的方法是使用 Tailwind CLI 工具。
创建package.json {#%E5%88%9B%E5%BB%BApackage.json}
这将创建一个json文件
npm init -y
安装tailwind {#%E5%AE%89%E8%A3%85tailwind}
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
创建 postcss.config.js {#%E5%88%9B%E5%BB%BA-postcss.config.js}
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
创建xxxxx.css文件 {#%E5%88%9B%E5%BB%BAxxxxx.css%E6%96%87%E4%BB%B6}
由于Tailwind需要监听一个CSS文件，我们需要配置它，支持将自定义样式写在里面
@tailwind base;
@tailwind components;
@tailwind utilities;
配置Tailwind.config.js {#%E9%85%8D%E7%BD%AEtailwind.config.js}
配置基于Halo主题而配置，如果你是使用其他部分，请在 content 中修改项目地址即可。
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./templates/**/*.html",
"./templates/assets/**/*.js"
],
theme: {
extend: {},
},
plugins: [],
}
扫描并构建CSS {#%E6%89%AB%E6%8F%8F%E5%B9%B6%E6%9E%84%E5%BB%BAcss}
通过监听content 中设置的项目地址，监听类名并生成css文件
npx tailwindcss -i ./src/input.css -o ./templates/assets/css/style.css --watch
在HTML中编写样式 {#%E5%9C%A8html%E4%B8%AD%E7%BC%96%E5%86%99%E6%A0%B7%E5%BC%8F}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
高级配置 {#%E9%AB%98%E7%BA%A7%E9%85%8D%E7%BD%AE}
但往往每次使用扫描构建太麻烦了，我们可以简化代码package.json
"scripts": {
"tailwind": "npx tailwindcss -i ./css/tailwind.css -o ./templates/assets/css/style.css --watch"
},
