还是以 vue 项目为例，去配置和使用 tailwindcss
官网 https://tailwindcss.com/docs/installation/using-postcss
安装 vue 项目
安装 vue 项目
# 创建
pnpm create vue
# 选择配置，尽量选 TypeScript、Router、Pinia、ESLint、Prettier 这些。你做一个大的项目，这些都是必须的
我们把 package.json 中的 type 设置成 module。遵循使用 es 模块规范。
{
…,
"type": "module"
}
然后运行起来看看。
cd tailwindtest
pnpm install
pnpm format
pnpm dev
养成好习惯，版本控制一定要的。
git init -b main
git add .
git commit -m 'vue initialize'清理 vue
# 删除所有默认组件
rm -rf src/components/*
# 删除所有默认 css、svg
rm -rf src/assets/*
# 删除所有默认的 views
rm rf src/views/*插入一个 src/views/home.vue，填入以下代码。
<template>
<h2>home</h2>
</template>修改 src/router/index.ts，填入以下代码。
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/home.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: Home
}
]
})
export default router修改 App.vue， 填入以下代码。
<template>
<RouterView />
</template>去掉 main.ts 中对 cs 的引入代码。
就是删除 import './assets/main.css' 这一行。
pinia 文件先不管。再运行，查看下效果。
提交代码。然后以这个为基础来安装 tailwindcss 以及相关的插件。
git add .
git commit -m '清理 vue 项目，只留下一个 home 页面'上边安装了 eslint, 然后文件名又叫 home.vue，这个时候 vscode 会出一个警告： Component name "home" should always be multi-word.。默认情况下，eslint 要求文件名以多词组的方式来命名。这样单个单词的，会出现上边这样的警告。
只需要修改 eslint 的配置即可。再根目录下，修改 .eslintrc.cjs 文件。增加 rules 配置。
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')
module.exports = {
root: true,
'extends': [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/eslint-config-typescript',
'@vue/eslint-config-prettier/skip-formatting'
],
parserOptions: {
ecmaVersion: 'latest'
},
rules: {
'vue/multi-word-component-names': 'off'
}
}这样就可以了。就不会再提示了。
安装 tailwindcss 和 postcss
https://tailwindcss.com/docs/installation/using-postcss
tailwindcss 作为 postcss 的插件来使用。是其与 vite 等构建工具的最无缝使用方式。单独的 css 还是喜欢实用 sass 的方式来写。额外加了 sass。
pnpm add -D tailwindcss postcss autoprefixer sass
# 生成 postcss.config.js 和 tailwind.config.js 配置文件
# -p 就是连 postcss 的配置文件一起生成
pnpx tailwindcss init -ppostcss.config.js 长这样。注意使用 es 模块的方法，别用 commonjs 模块的方法。
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
'postcss-import': {}
},
}tailwind.config.js 长这样。注意使用 es 模块的方法，别用 commonjs 模块的方法。
content 中配置需要处理的文件。
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./components/**/*.{js,vue,ts}",
"./src/**/*.vue"
],
theme: {
extend: {},
},
plugins: [],
}添加 ./assets/css/main.scss，内容如下
@tailwind base;
@tailwind components;
@tailwind utilities;然后在 main.js 中导入。
import '@/assets/css/main.scss'然后再运行试试。
发现，显示的 home 边小了，并且靠边靠顶了。这是 tailwindcss 配置生效了。
提交版本。
git add .
git commit -m '安装和配置 tailwindcss 以及相关'到此，环境好了。
安装 vscode 插件
-
Tailwind CSS IntelliSense（建议开启Emmet Completions功能）
-
Tailwind Fold
-
Tailwind Documentation
-
Tailwind Config Viewer
插件说明
https://juejin.cn/post/7220606022786990138
重启 vscode。 到此，插件和插件都装好了。可以按官方文档一点一点的往下看，边看边实践。
就是这样哈。一个显示器看文档。一个显示器分屏一边看结果，一边敲代码。
使用
看看这个更实在好用：
https://www.w3cschool.cn/tailwind_css/tailwind_css-ld2m3p8q.html
这里总结以下几点，一边使用，一边总结。
-
传统 html 中，class 是被用来定义类名的，类名是会与一个或一些样式(写在.css 文件或 style 标签中的)进行对应。在这里的 class 要理解成就是写样式，而不是类名。所以这里的 class 有时候会很长。这一点，和整个插件带来的好处，这个我是可以接受和乐意的。在 div 上写样式，别一样的感觉。
-
在心中，你要有样式。比如你得知道样式带来的具体表现和意义。就像搭积木一样，知道该怎么放。这里不仅仅是怎么放。可能还有修饰，比如放大一点，透明一点，转个角度等等。还有动画等。
-
要清楚单位。rem，px，vw，vh，calc 等。以及对应关系。
-
接上边第二条，搭建表现。按步骤会考虑（这里仅仅是 div 层次的，不涉及主题、多语言这些）到的。
- 用什么布局，（现在通常会喜欢用 flex 布局）该怎么布局（主轴横向还是纵向）。
- 宽高是否固定，还是随内容自适应，还是随视口自适应。
- 背景颜色、圆角、阴影
- 是否有边框 边框颜色什么样子的，边框大小什么样子的
- 是否要用到 margin
- 是否要用到 padding
- 文字颜色、文字大小、文字字体等等