uniapp如何使用tailwind css

在uniapp项目中如何正确配置和使用tailwind css？按照官方文档安装后样式不生效，有没有完整的集成方案？需要额外配置postcss或purgecss吗？求具体实现步骤和注意事项。

2 回复

在uniapp中使用Tailwind CSS，需要安装postcss插件并配置。先安装tailwindcss、postcss和autoprefixer，然后在项目根目录创建tailwind.config.js文件，配置content路径指向uniapp页面文件。最后在App.vue的style中引入tailwind基础样式即可。


在 UniApp 中使用 Tailwind CSS 需要一些配置步骤，因为 UniApp 默认不支持 PostCSS（Tailwind 依赖的工具）。以下是详细方法：

1. 安装依赖

npm install -D tailwindcss postcss autoprefixer

2. 生成配置文件

npx tailwindcss init -p

3. 配置 tailwind.config.js

module.exports = {
  content: ["./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. 创建样式文件

在 src 目录下创建 tailwind.css：

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

5. 修改 vue.config.js

const path = require('path')

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'postcss-loader'
          ]
        }
      ]
    }
  },
  css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          config: path.resolve(__dirname, 'postcss.config.js')
        }
      }
    }
  }
}

6. 配置 postcss.config.js

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

7. 引入样式

在 App.vue 中引入：

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

使用示例

<template>
  <view class="bg-blue-500 text-white p-4 rounded">
    Hello Tailwind!
  </view>
</template>

注意事项

  1. 某些 Tailwind 类可能需要额外配置才能在 UniApp 中正常工作
  2. 建议使用 @apply 指令提取常用样式
  3. 生产环境记得压缩 CSS

完成以上配置后，就可以在 UniApp 项目中正常使用 Tailwind CSS 的样式类了。

回到顶部