taro-tailwind
taro-tailwind是一个为了在Taro中使用TailwindCSS而编写的工具。该工具生成适合在Taro中使用的TailwindCSS类,去掉了响应式布局、伪类等特性,并调整宽高、字体等数值的定义,以适应在手机端的使用。taro-taiwind同时保留了通过tailwind.config.js配置文件调整样式的能力。项目基于nativescript-tailwind修改而来。
ps: taro-tailwind理论上可以直接使用在小程序项目里。
安装
npm:
npm install --save-dev taro-tailwind
yarn:
yarn add --dev taro-tailwind
使用
支持2种使用方式:
- 直接引入预先生成的css文件;
- 使用PostCSS生成自定义的css文件(通过tailwind.config.js)。
1. 直接引入
在app.jsx中引入样式文件
import 'taro-tailwind/dist/tailwind.css'
2. 使用PostCSS生成
添加talwindcss依赖:
# 使用npm
npm install --save-dev tailwindcss
# 使用yarn
yarn add --dev tailwindcss
复制默认配置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文件:
postcss ./src/tailwind.src.css -o ./src/tailwind.css
在app.jsx中引入样式文件
import './tailwind.css'
注意事项
在自定义组件中使用时,建议设置options.addGlobalClass字段为true,以免生成的样式文件(wxss)太大
/* CustomComponent.js */
export default class CustomComponent extends Component {
static options = {
addGlobalClass: true
}
render () {
...
}
}
反斜杠和冒号的使用
小程序不支持使用反斜杠和冒号作为类名,因此默认配置文件(tailwind.config.js)中,反斜杠修改成使用下划线(_),例如:
<View className='w-1/3'></View>
应该写成:
<View className='w-1_3'></View>
默认配置中, 冒号定义也已全部去掉。
FAQ
使用PurgeCSS简化生成的tailwind.css
修改postcss.config.js文件,使用下面的示例配置:
const purgecss = require('@fullhuman/postcss-purgecss')
const production = process.env.NODE_ENV === 'production'
module.exports = {
plugins: [
require('tailwindcss'),
// require('taro-tailwind')({debug: true}),
require('taro-tailwind'),
require('autoprefixer'),
production && require('cssnano')({ preset: 'default' }),
production &&
purgecss({
content: ['**/*.html', './src/**/*.js', './src/**/*.jsx'],
css: ['./src/**/*.css'],
extractors: [],
}),
],
}
运行命令生成简化后的css:
NODE_ENV=production postcss ./src/tailwind.src.css -o ./src/tailwind.css
或加到打包脚本(package.json)里:
{
"scripts": {
"build:weapp": "cross-env NODE_ENV=production postcss ./src/tailwind.src.css -o ./src/tailwind.css && taro build --type weapp",
}
}