From 185150b1af181e069332b3ae92e65f0b729e58a4 Mon Sep 17 00:00:00 2001 From: ice breaker <1324318532@qq.com> Date: Tue, 2 Sep 2025 11:13:03 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=20tailwindcss=20?= =?UTF-8?q?=E9=9B=86=E6=88=90=E7=AB=A0=E8=8A=82,=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E9=9B=86=E6=88=90=E5=87=BA=E9=94=99=E9=97=AE=E9=A2=98=20https:?= =?UTF-8?q?//github.com/NervJS/taro/issues/18254?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/tailwindcss.mdx | 38 +++++++++++++------ versioned_docs/version-3.x/tailwindcss.mdx | 44 ++++++++++++++-------- 2 files changed, 55 insertions(+), 27 deletions(-) diff --git a/docs/tailwindcss.mdx b/docs/tailwindcss.mdx index a34c17cd24e6..b8d44b8f7e33 100644 --- a/docs/tailwindcss.mdx +++ b/docs/tailwindcss.mdx @@ -11,17 +11,25 @@ import TabItem from '@theme/TabItem'; 所以，熟悉 `Tailwind CSS` 之后，可以大幅度的加快我们应用的开发速度，提升代码的可维护性，接下来让我们看看如何在 `tarojs` 应用中使用它吧。 -## 1. 安装与配置 tailwindcss +:::info +本篇文章是 `tailwindcss@3.x` 集成 `tarojs` 的教程 + +由于目前小程序兼容的 `CSS` 版本较浏览器低，所以推荐使用 `tailwindcss@3.x` 来生成更低版本的 `CSS` 代码，来兼容更多的移动端设备 + +如果你需要使用 `tailwindcss@4.x` 或者查看最新版本的文档，请访问 [`weapp-tailwindcss` 官方网站](https://tw.icebreaker.top/) +::: -首先我们要把 `tailwindcss` 安装和配置好。这里我们参考 `tailwindcss` 官网中，`postcss` 的使用方式进行安装 ([参考链接](https://tailwindcss.com/docs/installation/using-postcss))： +## 1. 安装与配置 tailwindcss@3 -### 1. 使用包管理器安装 `tailwindcss` +首先我们要把 `tailwindcss` 安装和配置好。这里我们参考 `tailwindcss` 官网中，`postcss` 的使用方式进行安装 ([参考链接](https://v3.tailwindcss.com/docs/installation/using-postcss)) + +### 1. 使用包管理器安装 `tailwindcss@3` ```bash -npm i -D tailwindcss postcss autoprefixer +npm i -D tailwindcss@3 postcss autoprefixer # 初始化 tailwind.config.js 文件 npx tailwindcss init ``` @@ -30,7 +38,7 @@ npx tailwindcss init ```bash -yarn add -D tailwindcss postcss autoprefixer +yarn add -D tailwindcss@3 postcss autoprefixer # 初始化 tailwind.config.js 文件 npx tailwindcss init ``` @@ -39,7 +47,7 @@ npx tailwindcss init ```bash -pnpm i -D tailwindcss postcss autoprefixer +pnpm i -D tailwindcss@3 postcss autoprefixer # 初始化 tailwind.config.js 文件 npx tailwindcss init ``` @@ -65,7 +73,7 @@ module.exports = { ### 3. 配置 `tailwind.config.js` -`tailwind.config.js` 是 `tailwindcss` 的配置文件，我们可以在里面配置 `tailwindcss` 的各种行为。[全量配置项](https://tailwindcss.com/docs/configuration) +`tailwind.config.js` 是 `tailwindcss` 的配置文件，我们可以在里面配置 `tailwindcss` 的各种行为。[v3全量配置项](https://v3.tailwindcss.com/docs/configuration) ```js title="tailwind.config.js" /** @type {import('tailwindcss').Config} */ @@ -87,10 +95,17 @@ module.exports = { 在你的项目入口文件里引入 `tailwindcss`，比如 `taro app` 的 `app.scss` ```scss title="app.scss" +// sass 版本1.25+ 使用 @use @use 'tailwindcss/base' as *; @use 'tailwindcss/components' as *; @use 'tailwindcss/utilities' as *; -// 不使用 sass 就这么写 + +// 老版本的 scss +// @import 'tailwindcss/base'; +// @import 'tailwindcss/components'; +// @import 'tailwindcss/utilities'; + +// 通用写法 // @tailwind base; // @tailwind components; // @tailwind utilities; @@ -141,15 +156,15 @@ pnpm i -D weapp-tailwindcss } ``` -添加这段脚本的用途是，每次安装包后，都会自动执行一遍 `weapp-tw patch` 这个脚本，给本地的 `tailwindcss` 打上小程序支持补丁。 +添加这段脚本的用途是，每次安装包后，都会自动执行一遍 `weapp-tw patch` 这个脚本，给本地的 `tailwindcss` 打上小程序支持补丁。[详细作用](https://tw.icebreaker.top/docs/quick-start/this-plugin) ### 配置你的 `tarojs` 应用 > 这个配置同时支持 `tarojs` 的 `react` / `preact` / `vue2` / `vue3` 等等所有框架 -在项目的配置文件 `config/index.js` 中注册: +在项目的配置文件 `config/index.ts` 中注册: -```js title="config/index.js" +```js title="config/index.ts" const { UnifiedWebpackPluginV5 } = require('weapp-tailwindcss/webpack') // 文件是 ts 则为 // import { UnifiedWebpackPluginV5 } from 'weapp-tailwindcss/webpack' @@ -162,7 +177,6 @@ const { UnifiedWebpackPluginV5 } = require('weapp-tailwindcss/webpack') install: { plugin: UnifiedWebpackPluginV5, args: [{ - appType: 'taro', // 下面个配置，会开启 rem -> rpx 的转化 rem2rpx: true }] diff --git a/versioned_docs/version-3.x/tailwindcss.mdx b/versioned_docs/version-3.x/tailwindcss.mdx index e3eb152e81dc..b8d44b8f7e33 100644 --- a/versioned_docs/version-3.x/tailwindcss.mdx +++ b/versioned_docs/version-3.x/tailwindcss.mdx @@ -11,17 +11,25 @@ import TabItem from '@theme/TabItem'; 所以，熟悉 `Tailwind CSS` 之后，可以大幅度的加快我们应用的开发速度，提升代码的可维护性，接下来让我们看看如何在 `tarojs` 应用中使用它吧。 -## 1. 安装与配置 tailwindcss +:::info +本篇文章是 `tailwindcss@3.x` 集成 `tarojs` 的教程 + +由于目前小程序兼容的 `CSS` 版本较浏览器低，所以推荐使用 `tailwindcss@3.x` 来生成更低版本的 `CSS` 代码，来兼容更多的移动端设备 + +如果你需要使用 `tailwindcss@4.x` 或者查看最新版本的文档，请访问 [`weapp-tailwindcss` 官方网站](https://tw.icebreaker.top/) +::: -首先我们要把 `tailwindcss` 安装和配置好。这里我们参考 `tailwindcss` 官网中，`postcss` 的使用方式进行安装 ([参考链接](https://tailwindcss.com/docs/installation/using-postcss))： +## 1. 安装与配置 tailwindcss@3 -### 1. 使用包管理器安装 `tailwindcss` +首先我们要把 `tailwindcss` 安装和配置好。这里我们参考 `tailwindcss` 官网中，`postcss` 的使用方式进行安装 ([参考链接](https://v3.tailwindcss.com/docs/installation/using-postcss)) + +### 1. 使用包管理器安装 `tailwindcss@3` ```bash -npm i -D tailwindcss postcss autoprefixer +npm i -D tailwindcss@3 postcss autoprefixer # 初始化 tailwind.config.js 文件 npx tailwindcss init ``` @@ -30,7 +38,7 @@ npx tailwindcss init ```bash -yarn add -D tailwindcss postcss autoprefixer +yarn add -D tailwindcss@3 postcss autoprefixer # 初始化 tailwind.config.js 文件 npx tailwindcss init ``` @@ -39,7 +47,7 @@ npx tailwindcss init ```bash -pnpm i -D tailwindcss postcss autoprefixer +pnpm i -D tailwindcss@3 postcss autoprefixer # 初始化 tailwind.config.js 文件 npx tailwindcss init ``` @@ -65,7 +73,7 @@ module.exports = { ### 3. 配置 `tailwind.config.js` -`tailwind.config.js` 是 `tailwindcss` 的配置文件，我们可以在里面配置 `tailwindcss` 的各种行为。[全量配置项](https://tailwindcss.com/docs/configuration) +`tailwind.config.js` 是 `tailwindcss` 的配置文件，我们可以在里面配置 `tailwindcss` 的各种行为。[v3全量配置项](https://v3.tailwindcss.com/docs/configuration) ```js title="tailwind.config.js" /** @type {import('tailwindcss').Config} */ @@ -87,10 +95,17 @@ module.exports = { 在你的项目入口文件里引入 `tailwindcss`，比如 `taro app` 的 `app.scss` ```scss title="app.scss" -@import 'tailwindcss/base'; -@import 'tailwindcss/components'; -@import 'tailwindcss/utilities'; -// 不使用 sass 就这么写 +// sass 版本1.25+ 使用 @use +@use 'tailwindcss/base' as *; +@use 'tailwindcss/components' as *; +@use 'tailwindcss/utilities' as *; + +// 老版本的 scss +// @import 'tailwindcss/base'; +// @import 'tailwindcss/components'; +// @import 'tailwindcss/utilities'; + +// 通用写法 // @tailwind base; // @tailwind components; // @tailwind utilities; @@ -141,15 +156,15 @@ pnpm i -D weapp-tailwindcss } ``` -添加这段脚本的用途是，每次安装包后，都会自动执行一遍 `weapp-tw patch` 这个脚本，给本地的 `tailwindcss` 打上小程序支持补丁。 +添加这段脚本的用途是，每次安装包后，都会自动执行一遍 `weapp-tw patch` 这个脚本，给本地的 `tailwindcss` 打上小程序支持补丁。[详细作用](https://tw.icebreaker.top/docs/quick-start/this-plugin) ### 配置你的 `tarojs` 应用 > 这个配置同时支持 `tarojs` 的 `react` / `preact` / `vue2` / `vue3` 等等所有框架 -在项目的配置文件 `config/index.js` 中注册: +在项目的配置文件 `config/index.ts` 中注册: -```js title="config/index.js" +```js title="config/index.ts" const { UnifiedWebpackPluginV5 } = require('weapp-tailwindcss/webpack') // 文件是 ts 则为 // import { UnifiedWebpackPluginV5 } from 'weapp-tailwindcss/webpack' @@ -162,7 +177,6 @@ const { UnifiedWebpackPluginV5 } = require('weapp-tailwindcss/webpack') install: { plugin: UnifiedWebpackPluginV5, args: [{ - appType: 'taro', // 下面个配置，会开启 rem -> rpx 的转化 rem2rpx: true }]