Tailwind CSS 4

1. 在 Vite 项目中使用 Tailwind

1. 安装 Tailwind CSS 相关依赖：

   npm install tailwindcss @tailwindcss/vite -D

2. 修改 vite.config.ts 配置文件：

   import { defineConfig } from 'vite'
   import tailwindcss from '@tailwindcss/vite'
   
   export default defineConfig(() => {
     return {
       plugins: [tailwindcss()],
     }
   })

3. 新建 tailwind.css（或在已有的主 CSS 文件中添加）：

   @import 'tailwindcss';

   与预处理器（如 Sass、Less）一起使用

   由于 Tailwind 向 CSS 添加了一些新的非标准关键字（如 @tailwind、@apply、theme() 等），在 Sass、Less 中编写 Tailwind 你通常必须以令人讨厌、不直观的方式编写 CSS，才能让预处理器给你预期的输出。进一步了解可以参考这篇文章。

   但这并不是说 Tailwind CSS 不能与包含预处理器的项目一起工作。推荐的实践方式是，新建独立的 CSS 文件（而不是在现有 *.scss、*.less 的文件中修改），文件内容同上，并将该 CSS 引入页面即可。

4. 在项目入口文件中，如 index.ts：

   import './tailwind.css'
   import './style.scss'

2. VSCode 插件安装

推荐安装官方的 Tailwind CSS IntelliSense 插件。该插件提供自动补全、悬停预览、Linting 等功能，能极大加快项目的开发效率。

推荐配置：

{
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "tailwindCSS.files.exclude": [
    "**/.git/**",
    "**/node_modules/**",
    "**/.hg/**",
    "**/.svn/**",
    "**/*.less",
    "**/*.scss"
  ],
  "tailwindCSS.includeLanguages": { "vue": "html" }
}

sass 自定义的 `theme()` 函数报错

安装 Tailwind CSS IntelliSense 插件后，*.scss 文件中如果有自定义的 theme() 函数，则会提示红色波浪线报错。这是因为 Tailwind CSS 有一个内置函数也叫 theme()，用于访问 tailwind.config.js 中的配置。

推荐的解决方案就是将 *.scss 中的 theme() 函数改成其它名称。

或尝试如下配置：

"tailwindCSS.validate": false

这会直接关闭 Tailwind CSS 验证。