Tailwind V4 安装与使用
编辑Tailwind CSS 从 3.x 升级到 4.x 的关键改进摘要：
性能优化：编译速度更快，生成的 CSS 文件更小，减少重复样式。
容器查询支持：支持
@container，增强响应式布局能力。ARIA 和数据属性支持：新增对
aria-和data-属性状态的工具类支持。默认断点增强：提供更灵活的断点配置选项。
动画改进：优化
transition和animation的工具类，使用更直观。JIT 编译增强：支持更复杂的动态类名生成，编译效率提升。
排版插件升级：改进
@tailwindcss/typography插件，默认样式更丰富。配置简化：优化
tailwind.config.js格式，更易于维护和调整。插件兼容性：改进插件系统，确保官方和第三方插件更易集成。
移除废弃功能：旧版中的一些弃用字段已被完全移除。
安装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 tailwindcss @tailwindcss/postcss postcss创建 postcss.config.mjs
export default {
plugins: {
"@tailwindcss/postcss": {},
}
}创建xxxxx.css文件
由于Tailwind需要监听一个CSS文件，我们需要配置它，支持将自定义样式写在里面
@import "tailwindcss";配置Tailwind.config.js
注意：V4 版本中，此配置为非必须项，也可作为自定义使用官方默认配置的生成
npx tailwindcss init --full配置基于Halo主题而配置，如果你是使用其他部分，请在 content 中修改项目地址即可。
module.exports = {
content: [
"./templates/**/*.html",
"./templates/assets/**/*.js"
],
theme: {
extend: {},
},
plugins: [],
}扫描并构建CSS
注意：V4 版本中 @tailwindcss/cli 替换 tailwind通过监听content 中设置的项目地址，监听类名并生成css文件
npx @tailwindcss/cli -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
每次使用
npm run tailwind快速构建
"scripts": {
"tailwind": "npx @tailwindcss/cli -i ./src/input.css -o ./templates/assets/css/style.css --watch"
},Prettier插件
安装插件
检查是否存在 Prettier插件
npm list prettier-plugin-tailwindcss安装 Prettier 插件
npm install -D prettier prettier-plugin-tailwindcss创建.prettier文件
{
"plugins": ["prettier-plugin-tailwindcss"],
"tailwindConfig": "./tailwind.config.js"
}- 1
- 0
-
分享