如何在Vue 3项目中集成Tailwind CSS？-css教程-PHP中文网

直接用 @tailwindcss/vite 插件三步启用：安装插件、在 vite.config.ts 中引入、组件中直接写类名；无需配置文件，自动扫描 .vue/.ts/.js 文件，支持暗色模式和按需打包。

如何在vue 3项目中集成tailwind css？

直接用 @tailwindcss/vite 插件，三步搞定，不用生成 tailwind.config.js，也不用碰 postcss.config.js —— 这是 2024 年后 Vue 3 + Vite 项目的最优路径。

为什么不用 `npx tailwindcss init -p`

这条命令会强制生成 tailwind.config.js 和 postcss.config.js，但在 Vite 生态下它们多数是冗余的，还容易埋坑：

content 字段若漏配 .vue 路径（比如没写 ./src/**/*.{vue,js,ts}），热更新时新增组件的类名就直接消失
postcss.config.js 若与插件内置的 PostCSS 实例冲突，构建会卡在 CSS 阶段，控制台无报错但页面空白
插件默认启用 darkMode: 'class'，而手动生成的配置里没声明，dark:bg-gray-800 这类类名直接不生效

三步启用 `@tailwindcss/vite`

不需要额外配置文件，也不需要手动引入 CSS：

安装：npm install -D @tailwindcss/vite

在 vite.config.ts 中启用：

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

在任意 .vue 组件模板中直接写类名，比如：<div class="text-lg font-medium text-blue-600"> <p>插件会自动扫描 <code>src/**/*.{vue,ts,js}，开发时实时注入，生产时只打包实际用到的工具类。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

类名不生效？先检查这三点

不是配置问题，大概率是环境或路径陷阱：
- 确保组件扩展名是 .vue（不是 .tsx 或纯 .js），否则插件默认不扫描
- 如果用了 <style scoped></style>，@apply 定义的自定义类不会被注入——想复用组合样式，得改用 <style></style>（非 scoped）或直接在模板里写实用类
- Vite HMR 有时缓存旧的 CSS 注入逻辑，重启 dev server 比改配置更管用；执行 vite --force 强制清缓存比反复删 node_modules 快得多
需要自定义主题或暗色模式怎么办

必须用 tailwind.config.ts（不是 .js），且内容只保留必需字段：
```
import type { Config } from 'tailwindcss'
export default {
  theme: {
    extend: {
      colors: {
        primary: '#3490dc',
      },
    },
  },
  darkMode: 'class',
} as Config
```
注意：插件只识别 .ts 后缀的配置文件；加了 content 字段反而可能覆盖插件默认扫描逻辑，除非你明确要限制范围。

最常被忽略的一点：动态拼接类名（如 :class="['text-' + size, 'font-' + weight]"）不会被静态扫描到，必须加 safeList 或正则匹配，否则构建后这些类就没了。