字节笔记本字节笔记本

在 TaroJS 应用中使用 Tailwind CSS

2024-06-05

在 TaroJS 应用中安装并配置 Tailwind CSS,包括使用 `pnpm` 安装依赖、设置 `postcss.config.js` 和 `tailwind.config.js`,以及集成 `weapp-tailwindcss` 插件以支持小程序开发。

安装与配置 Tailwind CSS

  1. 使用 pnpm 安装 Tailwind CSS 及相关依赖:

    pnpm install -D tailwindcss postcss autoprefixer
    
  2. 初始化 tailwind.config.js 文件:

    npx tailwindcss init
    
  3. 创建 postcss.config.js 并注册 Tailwind CSS 插件:

    // postcss.config.js
    module.exports = {
      plugins: {
        tailwindcss: {},
        autoprefixer: {},
      },
    }
    
  4. 配置 tailwind.config.js 文件:

    /** @type {import('tailwindcss').Config} */
    module.exports = {
      content: ['./public/index.html', './src/**/*.{html,js,ts,jsx,tsx}'],
      corePlugins: {
        preflight: false,
      },
    }
    
  5. 在项目入口文件中引入 Tailwind CSS:

    @import 'tailwindcss/base';
    @import 'tailwindcss/components';
    @import 'tailwindcss/utilities';
    

配置 rem 单位转化

  1. 安装 postcss-rem-to-responsive-pixel 插件:

    pnpm i -D postcss-rem-to-responsive-pixel
    
  2. 配置 postcss.config.js 文件:

    // postcss.config.js
    module.exports = {
      plugins: {
        tailwindcss: {},
        autoprefixer: {},
        'postcss-rem-to-responsive-pixel': {
          rootValue: 32,
          propList: ['*'],
          transformUnit: 'rpx',
        },
      },
    }
    

安装和配置 weapp-tailwindcss

  1. 安装 weapp-tailwindcss 插件:

    pnpm i -D weapp-tailwindcss
    npx weapp-tw patch
    
  2. package.jsonscripts 字段中添加以下脚本:

    "scripts": {
      "postinstall": "weapp-tw patch"
    }
    
  3. 在项目配置文件 config/index.js 中注册插件:

    const { UnifiedWebpackPluginV5 } = require('weapp-tailwindcss/webpack');
    
    module.exports = {
      mini: {
        webpackChain(chain, webpack) {
          chain.merge({
            plugin: {
              install: {
                plugin: UnifiedWebpackPluginV5,
                args: [{ appType: 'taro' }],
              },
            },
          });
        },
      },
    };
    

和 NutUI 一起使用

  1. 修改 config/index.js 文件,配置 @tarojs/plugin-html 插件:
    module.exports = {
      mini: {
        postcss: {
          htmltransform: {
            enable: true,
            config: {
              removeCursorStyle: false,
            },
          },
        },
      },
    };
    

示例代码

在项目中编写模板:

<View className="text-[#acc855] text-[100px]">Hello world!</View>

使用以下命令启动开发服务器:

pnpm run dev:weapp

参考资料