uniapp 中 tailwindcss 的简单安装使用

Tailwind CSS 是一个用于构建现代、响应式Web界面的CSS框架。与传统的CSS框架不同，Tailwind 不提供预定义的组件，而是专注于提供一组小而灵活的原子类。开发者可以根据需要组合这些原子类，构建出符合设计规范的界面。

Tailwind CSS 背后的理念是关注实用性。这意味着 Tailwind CSS 提供低级实用程序类，而不是预定义组件类，使您能够在不离开 HTML 的情况下构建独特的设计。传统 CSS 可能会导致过度使用覆盖、臃肿的文件和“div soup”。通过转向实用程序优先的 CSS 框架，您可以缓解这些问题，从而获得更干净、更精简的代码库。

简单来说就是能够让你少写CSS代码, 通过安装引入tailwindcss复用相关的css类。

以下三个链接是相关参考 官网 中文官网 第三方参考

以下将简单的安装以及使用

安装以及配置

• 安装

yarn add -D tailwindcss postcss autoprefixer 

• 初始化 tailwind.config.js 文件

npx tailwindcss init

• 在项目目录下创建 postcss.config.cjs 并注册 tailwindcss

//postcss.config.cjs
const plugins = [require('tailwindcss')(), require('autoprefixer')()]
module.exports = plugins

• 在项目目录下创建tailwind.config.js并配置

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 这里给出了一份 uni-app /taro 通用示例，具体要根据你自己项目的目录结构进行配置
  // 不在 content 包括的文件内，你编写的 class，是不会生成对应的css工具类的
  content: ['./public/index.html', './src/**/*.{html,js,ts,jsx,tsx,vue}'],
  // 其他配置项
  // ...
  corePlugins: {
    // 小程序不需要 preflight，因为这主要是给 h5 的，如果你要同时开发小程序和 h5 端，你应该使用环境变量来控制它
    //preflight: false
  },
  important: true
}

• 在App.vue中添加tailwindcss样式

<style>
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>

• 安装weapp-tailwindcss

yarn add -D weapp-tailwindcss
# 可以执行一下 patch 方法
npx weapp-tw patch

调整package.json

"postinstall": "weapp-tw patch",

• 调整vite.config.ts配置

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import * as path from 'path'
import { UnifiedViteWeappTailwindcssPlugin as uvwt } from 'weapp-tailwindcss/vite'
const isH5 = process.env.UNI_PLATFORM === 'h5'
const isApp = process.env.UNI_PLATFORM === 'app'
const WeappTailwindcssDisabled = isH5 || isApp
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    uni(),
    uvwt({
      disabled: WeappTailwindcssDisabled
    })
  ],
  resolve: {
    // 配置路径别名
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  // 公共css
  css: {
    preprocessorOptions: {
      scss: {
        javascriptEnabled: true,
        additionalData: `@import "@/styles/scss/index.scss";`
      }
    },
    postcss: {
      plugins: [require('tailwindcss')]
    }
  },
  build: {
    // minify: 'terser',
    terserOptions: {
      compress: {
        //生产环境时移除console
        drop_console: true,
        drop_debugger: true
      }
    }
  }
})

使用

前期不熟悉相关的css类一定要查看官网

vscode 中安装插件 Tailwind CSS IntelliSense， 安装完成后， 在项目中就能有相关的css类名提示

一些简单的类使用

//设置宽度为146rpx
w-[146rpx] 
//设置高度为146rpx
h-[146rpx] 
//设置上外边距为125rpx
mt-[125rpx] 
//设置下外边距为84rpx
mb-[84rpx]
//设置字体大小
text-[33rpx] 
//设置圆角
rounded-[42rpx]
//设置透明度为0.7
opacity-70
//设置字体颜色
text-[#0094ff] text-[pink]