uniapp

跟室友开始做小程序，准备使用uniapp来写，这边记录下学习过程

使用Tailwindcss

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init

npm install @uni-helper/vite-plugin-uni-tailwind

npm install tailwindcss-rem2px-preset -D

前两个是tailwindcss的基本配置，第三个是小程序适配，第四个是rem to rpx（因为tailwindcss的默认是rem单位）

然后设置tailwind.config.js

//tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx,vue}'],
  theme: {
    extend: {},
  },
  plugins: [],
  presets: [
    require('tailwindcss-rem2px-preset').createPreset({
      // 32 意味着 1rem = 32rpx
      fontSize: 32,
      // 转化的单位,可以变成 px / rpx
      unit: 'rpx'
    })
  ],
}

对于App.vue

<style>
  @import 'tailwindcss/base';
  @import 'tailwindcss/components';
  @import 'tailwindcss/utilities';
</style>

对于vite.config.js

//vitr.config.js
import { defineConfig } from "vite";
import tailwindcss from 'tailwindcss';
import uni from "@dcloudio/vite-plugin-uni";
import uniTailwind from '@uni-helper/vite-plugin-uni-tailwind';

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        tailwindcss(),
      ],
    },
  },
  plugins: [uni(), uniTailwind()],
});