npmpackage.info

Gathering detailed insights and metrics for taro-plugin-tailwind

Other packages similar to taro-plugin-tailwind

@dcasia/mini-program-tailwind-webpack-plugin

1.5.7

让你的小程序用上原汁原味的 Tailwind/Windi CSS

taro-plugin-tailwind-weapp

0.0.2

a taro plugin to use tailwind.css in taro

taro-plugin-tailwind-lwx

1.2.9

Taro 接入 windicss / tailwindcss 插件，支持小程序 / H5，React Native 暂未测试。

@lwx7213422/taro-plugin-tailwind

1.3.0

Taro 接入 windicss / tailwindcss 插件，支持小程序 / H5，React Native 暂未测试。

Gathering detailed insights and metrics for taro-plugin-tailwind

taro-plugin-tailwind - 1.3.4 | npmpackage.info

taro-plugin-tailwind

Taro 接入 tailwindcss 插件

1.3.4

137

MIT

JavaScript

22.78 kB

1.7

Installations

npm install taro-plugin-tailwind

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

18.15.0

NPM Version

9.5.0 Pull Requests

Open

2

Total

182

Closed

159

Merged

21

Issues

Open

2

Total

52

Closed

50

Releases

Release 1.3.4

v1.3.4

Updated on Jul 20, 2023

Release 1.3.3

v1.3.3

Updated on Jul 20, 2023

Release 1.3.2

v1.3.2

Updated on Jul 14, 2023

Release 1.3.1

v1.3.1

Updated on Mar 06, 2023

Release 1.3.0

v1.3.0

Updated on Feb 17, 2023

Release 1.2.8

v1.2.8

Updated on Mar 02, 2022

View All 29 releases

Languages

JavaScript

TypeScript

HTML

CSS

JavaScript (64.01%)

TypeScript (31.23%)

HTML (3.69%)

CSS (1.06%)

Developer

pcdotfan

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

137 Stars

162 Commits

11 Forks

1 Watchers

5 Branches

3 Contributors

Updated on Jul 01, 2025

Maintainers

View All 3 Contributors

Package Meta Information

Latest Version

1.3.4

Package Id

taro-plugin-tailwind@1.3.4

Unpacked Size

22.78 kB

Size

7.15 kB

File Count

NPM Version

9.5.0

Node Version

18.15.0

Published on

Jul 20, 2023

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

tailwindcss autoprefixer postcss postcss-loader postcss-selector-replace

Dev Dependencies

@tarojs/taro @types/fs-extra @types/glob @types/node @types/react color-string release-it rimraf typescript

taro-plugin-tailwind

Taro 接入 tailwindcss 插件，支持大多数小程序（已测试微信、支付宝、百度小程序） / H5，React Native 暂未测试。

安装

在 Taro 项目根目录下安装

1$ npm i taro-plugin-tailwind --save-dev
2$ # 或使用 yarn
3$ yarn add -D taro-plugin-tailwind

使用

引入插件

请确保 Taro CLI 已升级至 Taro 3 的最新版本（3.5+），确保 taro-plugin-tailwind 版本在 v1.3.0 及以上。

修改项目 config/index.js 中的 plugins 配置如下：

1const config = {
2    /// ...
3    plugins: [
4        // ...其余插件
5        'taro-plugin-tailwind',
6    ],
7    /// ...
8    /// 亦或是传入具体参数：
9    plugins: [
10        // ...其余插件
11        ['taro-plugin-tailwind', {
12            // 具体参数为 tailwind postcss 配置项，见：https://github.com/tailwindlabs/tailwindcss/blob/master/types/config.d.ts#L352
13        }]
14    ],
15};

生成配置

执行 taro tailwind --init 生成必要的配置文件：

1$ taro tailwind --init // 默认生成 mini, h5 两种配置文件且必须存在
2$ taro tailwind --init weapp,tt,swan // 生成其它平台以 (,) 分隔

在项目主 CSS 文件（如 style.css / main.css）引入 tailwindcss：

1@tailwind base;
2@tailwind components;
3@tailwind utilities;

由此即可在项目任意位置使用 tailwindcss，并不再需要手动引入其它文件。

参数

插件接受如下参数：

参数项	类型	是否可选	用途
config	Object	是	`tailwindcss` 的 PostCSS 可选配置（Config）。

注意事项及限制

小程序

小程序不支持使用反斜杠和冒号作为类名，因此默认配置文件 mini.config.js 中，冒号、反斜杠 修改成使用下划线 _（参考 taro-tailwind）

1<View className="w-1/3"></View>

应该写成:

1<View className="w-1_3"></View>

配置文件中 separator 也设置为 _（configuration#separator）并且 preflight 选项应该始终保持关闭，不加载 modern-normalize。

此外，部分小程序平台由于所支持的选择器非常有限（如微信小程序，详见 WXSS | 微信开放文档），不能使用 tailwindcss 的某些特性（如 Attributify Mode、space-* 等），并非插件问题，有此类需求可考虑使用其它优秀方案：mini-program-tailwind。

常见问题

Q：为什么 Intellisense 失效了？

A：根据所使用的版本选择安装 Tailwind CSS Intellisense。

Q：保存后新样式没有生效？

A：请暂时设置 NODE_ENV 为 production 解决此问题，例：NODE_ENV=production npm run build:weapp -- --watch，具体参见示例。

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

1.7

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More