Tailwind CSS 是一个实用优先的 CSS 框架，旨在通过一系列预定义的类名来快速构建用户界面。

与传统的 CSS 框架不同的是，Tailwind CSS 不提供任何现成的组件或设计，而是通过一组小而分离的实用类来直接在 HTML 中应用样式。

安装Node.JS

前往 Node.js 官方网站 并下载适合你操作系统的 Node.js 安装程序。

检查Node.js

node -v

检查NPM

npm -v

更新NPM

npm install -g npm

Tainlwind安装配置

从头开始使用 Tailwind CSS 的最简单、最快捷的方法是使用 Tailwind CLI 工具。

创建package.json

这将创建一个json文件

npm init -y

安装tailwind

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

创建 postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

创建xxxxx.css文件

由于Tailwind需要监听一个CSS文件，我们需要配置它，支持将自定义样式写在里面

@tailwind base;
@tailwind components;
@tailwind utilities;

配置Tailwind.config.js

配置基于Halo主题而配置，如果你是使用其他部分，请在 content 中修改项目地址即可。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./templates/**/*.html",
    "./templates/assets/**/*.js"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

扫描并构建CSS

通过监听content 中设置的项目地址，监听类名并生成css文件

npx tailwindcss -i ./src/input.css -o ./templates/assets/css/style.css --watch

在HTML中编写样式

<!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>

高级配置

但往往每次使用扫描构建太麻烦了，我们可以简化代码package.json

 "scripts": {
    "tailwind": "npx tailwindcss -i ./css/tailwind.css -o ./templates/assets/css/style.css --watch"
  },