Tailwind CSS 学习
> npm install -D tailwindcss
> npx tailwindcss inittailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}新增 src/input.css 作为 Tailwind CSS 的入口
@tailwind base;
@tailwind components;
@tailwind utilities;--watch 监听文件变化，输出新的 build.css
> npx tailwindcss -i ./src/input.css -o ./dist/build.css --watch将命令行构建替换成 scripts 脚本执行，在package.json 中新增
{
"scripts": {
"start": "npx tailwindcss -i ./src/input.css -o ./dist/build.css --watch"
}
}新建 src/index.html，注意：本地测试需要注意路径，应为相对路径 ../dist/build.css
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./dist/build.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>Visual Studio Code 的官方 Tailwind CSS IntelliSense 扩展通过为用户提供自动补齐、语法高亮和 linting 等高级功能来增强 Tailwind 开发体验。
自动补齐. 类名智能建议，CSS 函数和指令.
Linting. 高亮 CSS 和标记中的错误和潜在错误。
悬停预览. 将鼠标悬停在 Tailwind 类名称上可查看完整的 CSS。
语法高亮. 提供语法定义，以便正确高亮 Tailwind 功能。
它会自动按照我们的 推荐的类顺序 对你的类进行排序。
> npm install -D prettier prettier-plugin-tailwindcssprettier.config.js
// prettier.config.js
module.exports = {
plugins: ['prettier-plugin-tailwindcss'],
}./src/*.html src 文件下的所有 .html 的文件进行格式化
> npx prettier ./src/*.html --write我们也可将此 cli 加到 package.json 的脚本执行命令中
{
"scripts": {
"prettier": "npx prettier ./src/*.html --write"
}
}可以通过添加 --minify 标志来缩小 CSS：
> npx tailwindcss -i ./src/input.css -o ./dist/build.css --minify通用我们也可以将上面的 cli 添加到 package.json 中 scripts
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent