Tailwind安装与使用
Tailwind CSS 是一个实用优先的 CSS 框架，旨在通过一系列预定义的类名来快速构建用户界面。
与传统的 CSS 框架不同的是，Tailwind CSS 不提供任何现成的组件或设计，而是通过一组小而分离的实用类来直接在 HTML 中应用样式。
安装Node.JS
前往 Node.js 官方网站 并下载适合你操作系统的 Node.js 安装程序。
检查Node.js
node -v检查NPM
npm -v更新NPM
npm install -g npmTainlwind安装配置
从头开始使用 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"
},- 3
-
分享