taro-tailwind是一个为了在Taro中使用TailwindCSS而编写的工具。该工具生成适合在Taro中使用的TailwindCSS类，去掉了响应式布局、伪类等特性。taro-taiwind同时保留了通过tailwind.config.js配置文件调整样式的能力。项目基于nativescript-tailwind修改而来。
ps: taro-tailwind理论上可以直接使用在小程序项目里。
npm:
npm install --save-dev taro-tailwindyarn:
yarn add --dev taro-tailwind支持2种使用方式:
- 直接引入预先生成的css文件；
- 使用PostCSS生成自定义的css文件(通过tailwind.config.js)。
在app.jsx中引入样式文件
import 'taro-tailwind/dist/tailwind.css'添加talwindcss依赖:
# 使用npm
npm install --save-dev tailwindcss postcss postcss-cli
# 使用yarn
yarn add --dev tailwindcss postcss postcss-cli复制默认配置tailwind.config.js和基础类定义tailwind.src.css到项目目录:
cp ./node_modules/taro-tailwind/tailwind.config.js ./tailwind.config.js
cp ./node_modules/taro-tailwind/tailwind.src.css ./src/tailwind.src.css在postcss.config.js中添加:
module.exports = {
plugins: [
// ...
require('tailwindcss'),
require('taro-tailwind'),
// ...
]
}然后使用postcss执行生成css文件:
npx postcss ./src/tailwind.src.css -o ./src/tailwind.css在app.jsx中引入样式文件
import './tailwind.css'/* CustomComponent.js */
export default class CustomComponent extends Component {
static options = {
addGlobalClass: true
}
render () {
//...
}
}小程序不支持使用斜杠和点号作为类名，因此默认配置文件(tailwind.config.js)中，斜杠修改成使用下划线_，点号改成d，例如:
<View className='w-1/3'></View>
<View className='w-1.5'></View>应该写成:
<View className='w-1_3'></View>
<View className='w-1d5'></View>默认配置中, 冒号定义也已全部去掉。
在tailwindcss.config.js增加了purge配置项：
module.exports = {
purge: [
"./src/**/*.js",
"./src/**/*.html",
"./src/**/*.vue",
"./src/**/*.jsx",
"./src/**/*.tsx",
],
corePlugins: {},
variants: {},
theme: {},
};运行命令生成简化后的css（先安装cross-env）：
cross_env NODE_ENV=production npx postcss ./src/tailwind.src.css -o ./src/tailwind.csstailwindcss默认只在production环境运行purgecss，更多purgecss的选项请参考tailwindcss的文档。
或加到打包脚本(package.json)里：
{
"scripts": {
"build:weapp": "cross-env NODE_ENV=production postcss ./src/tailwind.src.css -o ./src/tailwind.css && taro build --type weapp"
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent