【亲测免费】 微信小程序中使用TailwindCSS的指南

1. 项目目录结构及介绍

.
├── package.json         # 项目依赖及元数据
├── README.md            # 项目说明
├── config.js            # 项目配置
├── index.html           # 入口HTML文件
├── index.js             # 小程序主入口文件
├── miniprogram_npm      # 第三方库缓存
│   └── ...              # 包含 TailwindCSS 相关的 npm 包
├── src                  # 源码目录
│   ├── assets           # 图片和其他静态资源
│   ├── components       # 自定义组件
│   │   └── ...          # 各个组件文件
│   ├── pages            # 页面逻辑
│   │   ├── index        # 示例页面
│   │   │   ├── index.wxml    # 页面结构
│   │   │   ├── index.wxss    # 页面样式（可使用 TailwindCSS）
│   │   │   └── index.js     # 页面逻辑
│   ├── app.scss         # 应用级样式文件，引入 TailwindCSS
│   └── app.js           # 小程序全局逻辑
└── ...

解释：

• package.json: 定义项目依赖和脚本。
• config.js: 配置微信小程序的相关设置。
• index.html: 主页HTML模板。
• index.js: 小程序的主逻辑文件。
• miniprogram_npm: 存放npm包的本地缓存。
• src: 项目源代码，包括组件、页面和样式。
• src/assets: 项目中的图片等静态资源。
• src/components: 自定义组件的目录。
• src/pages: 包含各个小程序页面的逻辑、样式和结构。
• src/app.scss: 引入TailwindCSS的全局SCSS文件。
• src/app.js: 全局应用逻辑。

2. 项目启动文件介绍

index.js (小程序主入口)

此文件是小程序的主逻辑文件，通常用于初始化一些全局变量、事件监听和应用生命周期函数。在使用TailwindCSS的情况下，这里可能不需要特别的配置，但你可以在这里引入其他必要的初始化代码。

// index.js
App({
  onLaunch: function () {
    console.log('App Launch')
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  }
})

app.scss (全局样式)

在这个文件中，你可以引入TailwindCSS并设置你的全局CSS样式。例如：

// app.scss
@import 'node_modules/tailwindcss/dist/tailwind.min.css';
// 自定义全局样式
body {
  font-family: Arial, sans-serif;
}

3. 项目的配置文件介绍

config.js (小程序配置)

小程序的config.js文件用于配置小程序的一些基本信息，如页面路径、网络超时时间、服务器域名等。在结合TailwindCSS使用时，可能需要关注的是pages字段，确保所有使用了TailwindCSS的页面都在其中列出：

// config.js
const config = {
  pages: [
    'pages/index/index',
    // 添加其他页面路径...
  ],
  // 其他配置...
}

module.exports = config;

vite.config.js 或 webpack.config.js (构建配置)

如果项目使用Vite或Webpack进行构建，那么对应的配置文件可能会涉及到TailwindCSS的集成。通常包括以下内容：

• 使用PostCSS插件postcss-import和postcss-preset-env来处理CSS导入和兼容性。
• 配置tailwindcss插件，启用所需的TailwindCSS配置。
• 在生产环境中，使用purge选项去除未使用的CSS以减小包大小。

例如，对于Vite配置：

// vite.config.js
import { defineConfig } from 'vite'
import path from 'path'
import tailwindcss from 'tailwindcss'

export default defineConfig({
  build: {
    outDir: 'dist',
  },
  plugins: [
    tailwindcss({
      purge: ['./src/**/*.{vue,html,js,ts}', './public/index.html'],
      darkMode: false,
      theme: {},
      variants: {},
      plugins: [],
    }),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
})

对于Webpack配置，可以在webpack.config.js中类似地配置postcss-loader和tailwindcss插件：

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const Tailwindcss = require('tailwindcss');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
    new MiniCssExtractPlugin(),
    new CleanWebpackPlugin(),
    new Tailwindcss('./tailwind.config.js'), // 如果你有自定义的TailwindCSS配置
  ],
};

以上就是关于如何在微信小程序中使用TailwindCSS的基本介绍。要了解更多细节和高级使用方法，可以查阅项目文档或相关插件的官方文档。