TailwindCSS 如何与 uni-app 结合使用？

在uni-app项目中如何正确集成和使用TailwindCSS？按照官方文档配置后，遇到样式不生效的问题，尝试了多种方法仍未解决。具体问题是：1) 在App.vue中引入Tailwind的base样式后，部分组件样式被覆盖；2) H5端正常但小程序端样式丢失。请问有完整的uni-app + TailwindCSS配置方案吗？需要兼容多端且不影响原生组件样式。

2 回复

在 uni-app 中使用 TailwindCSS 需要手动配置。先安装 TailwindCSS，然后在 app.vue 中引入样式文件，再在 vue.config.js 中配置 PostCSS。注意部分样式可能需要额外适配小程序环境。

更多关于TailwindCSS 如何与 uni-app 结合使用？的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中使用 TailwindCSS 需要一些额外配置，以下是具体步骤：

1. 安装依赖

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

2. 配置 tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{vue,js,ts,jsx,tsx}',
    './components/**/*.{vue,js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
  // 重要：禁用 preflight，避免与 uni-app 默认样式冲突
  corePlugins: {
    preflight: false
  }
}

3. 创建样式文件

在 src 目录下创建 tailwind.css：

@tailwind base;
@tailwind components;
@tailwind utilities;

4. 配置 postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

5. 引入样式

在 App.vue 中引入：

<style>
@import './tailwind.css';
</style>

6. 使用示例

<template>
  <view class="p-4 bg-blue-500 text-white rounded-lg">
    <text class="text-lg font-bold">Hello Tailwind + uni-app</text>
  </view>
</template>

注意事项

  • 确保 corePlugins.preflight: false 避免样式冲突
  • 某些 Tailwind 类名可能需要转义（如 w-1/2）
  • H5 端支持最好，小程序端部分样式可能需要适配

这样就完成了 TailwindCSS 在 uni-app 中的集成配置。

回到顶部