HBuilderX创建uniapp项目使用 tailwindcss

文章目录

• 一、创建package.json文件
• 二、打开终端 yarn / npm 安装依赖
• 三、创建 vue.config.js文件
• 四、创建postcss.config.js文件
• 五、创建tailwind.config.js文件
• 六、App.vue文件的style中引入tailwindcss

  一、创建package.json文件

  {
    "devDependencies": {
      "autoprefixer": "9",
      "postcss": "7",
      "postcss-rem-to-responsive-pixel": "^5.1.3",
      "tailwindcss": "npm:@tailwindcss/postcss7-compat",
      "weapp-tailwindcss-webpack-plugin": "^1.6.8",
      "webpack": "npm:webpack@webpack-4"
    }
  }
  

  二、打开终端 yarn / npm 安装依赖

  三、创建 vue.config.js文件

  // 为了 tailwindcss jit 开发时的热更新
  if (process.env.NODE_ENV === "development") {
    process.env.TAILWIND_MODE = "watch";
  }
  const {
    UniAppWeappTailwindcssWebpackPluginV4,
  } = require("weapp-tailwindcss-webpack-plugin");
  /**
   * @type {import('@vue/cli-service').ProjectOptions}
   */
  const config = {
    //....
    configureWebpack: {
      plugins: [new UniAppWeappTailwindcssWebpackPluginV4()],
    },
    //....
  };
  module.exports = config;
  

  四、创建postcss.config.js文件

  const path = require("path");
  module.exports = {
    plugins: [
      require("autoprefixer")({
        remove: process.env.UNI_PLATFORM !== "h5",
      }),
      require("tailwindcss")({
        config: path.resolve(__dirname, "./tailwind.config.js"),
      }),
      // rem 转 rpx
      require("postcss-rem-to-responsive-pixel/postcss7")({
        rootValue: 32,
        propList: ["*"],
        transformUnit: "rpx",
      }),
    ],
  };
  

  五、创建tailwind.config.js文件

  const path = require("path");
  const resolve = (p) => {
  	return path.resolve(__dirname, p);
  };
  /** @type {import('@types/tailwindcss/tailwind-config').TailwindConfig} */
  module.exports = {
  	mode: "jit",
  	purge: {
  		content: [
  			resolve("./index.html"),
  			resolve("./pages/**/*.{vue,js,ts,jsx,tsx,wxml}"),
  		],
  	},
  	darkMode: false, // or 'media' or 'class'
  	theme: {
  		colors: {
  			white: '#ffffff',
  			black: '#000000',
  			main: '#333333',
  			content: '#666666',
  			muted: '#999999',
  			light: '#e5e5e5',
  			primary: {
  				DEFAULT: '#4173ff'
  			},
  			success: '#5ac725',
  			warning: '#f9ae3d',
  			error: '#f56c6c',
  			info: '#909399',
  			page: '#f6f6f6'
  		},
  		fontSize: {
  			xs: '24rpx',
  			sm: '26rpx',
  			base: '28rpx',
  			lg: '30rpx',
  			xl: '32rpx',
  			'2xl': '34rpx',
  			'3xl': '38rpx',
  			'4xl': '40rpx',
  			'5xl': '44rpx'
  		}
  	},
  	variants: {},
  	plugins: [],
  	corePlugins: {
  		preflight: false,
  	},
  };
  //自定义配置
  

  六、App.vue文件的style中引入tailwindcss

  	/*每个页面公共css */
  	@import "tailwindcss/base";
  	@import "tailwindcss/utilities";
  
  

  ---

  
  （图片来源网络，侵删）