@hyext/tailwindcss

虎牙小程序使用 tailwindcss3 的解决方案。

新特性

1. 支持 tailwindcss3 新特性（JIT，动态任意值）。
2. 充分利用 tailwindcss3 JIT模式，动态生成 hycss bundle，代码量比旧版大大减少。
3. 不再受spacing范围限制，旧版只能用[2, 94]且都是偶数，新版不限制，例如 px-100, w-523。

安装依赖

$ npm i @hyext/tailwindcss@1 tailwindcss@3 -D

使用

tailwindcss - 可查看tailwindcss官网。

配置文件

文件名为tailwind-hyext.config.js，安置在项目根目录。

module.exports = { 
  content: [
    './src/**/*.js|jsx|ts|tsx' // 需要扫描className的js文件
  ],
  input: "./src/tailwindcss/input.css", // 引入预编译的css代码
  output: "./src/tailwindcss/tailwind.hycss" // 输出JIT生成的结果
}

配置说明

• config.content - 必填，需要扫描className的js文件。
• config.input - 选填，引入预编译的css代码文件路径, 默认 input.css。
• config.output - 选填，输出动态生成的hycss代码文件路径，默认 tailwind.hycss。
• config.disabled - 选填，禁止使用tailwindcss，默认 false。

input.css文件内容：

@tailwind utilities;

请自行copy。

命令行

build

执行以下命令构建bundle:

$ npx tailwind-hyext

watch

执行以下命令观察文件变化构建bundle:

$ npx tailwind-hyext --watch

代码引用

引入安置在 output 位置的 tailwind.hycss 文件即可。

import 'path/to/tailwind.hycss'

兼容旧版本引用

新旧项目亦可以通过指定模块名 @hyext/tailwindcss/styles.hycss 引用，beyond构建器(4.2.0)版本以上会自动映射到您配置 output 生成的文件。

import '@hyext/tailwindcss/styles.hycss'

Demo

以下是展示新特性的demo:

JIT动态生成hycss文件

import '@hyext/tailwindcss/styles.hycss'

function App() {
  return (
    <View className="w-250 h-300 bg-white items-center"></View>
  )
}

自动生成的hycss内容：

.h-300 {
  height: 300px
}

.w-250 {
  width: 250px
}

.items-center {
  align-items: center
}

.bg-white {
  background-color: #fff
}

即用即所得，非常高效！。

动态任意值

note: 需要升级@hyext/[email protected]以上才支持动态任意值。

接下来展示令人兴奋的特性 - 动态任意值，基本有了这个特性，基本就不用写样式代码了。

import '@hyext/tailwindcss/styles.hycss'

function App() {
  return (
    <View className="w-250 h-300 pt-[666px] bg-[#1da1f2] text-[#ccc]"></View>
  )
}

以上样式代码，tailwindcss都可以识别，并生成对应的hycss代码：

.h-300 {
  height: 300px
}

.w-250 {
  width: 250px
}

.bg-\[\#1da1f2\] {
  background-color: #1da1f2
}

.text-\[\#ccc\] {
  color: #ccc
}

.pt-\[666px\] {
  padding-top: 666px
}

note: 暂时不支持多个值动态化，例如：border-[3px solid #000]。 可以改成短写：border-[#000]。

vscode 插件

Tailwind CSS IntelliSense - 自动辅助 tailwindcss 语法输入，用过都说好。

注意事项

inset-0

tailwindcss2 的 inset-0 样式为：

top: 0px;
bottom: 0px;
left: 0px;
right: 0px;

tailwindcss3 的 inset-0 样式为：

inset: 0px

tailwindcss3直接用了新的 css inset 属性实现，这个需要chrome87以上才支持，有一定的兼容性顾虑。

所以在tailwindcss3，我们建议用 inset-y-0 + inset-x-0 去替换 inset-0， 它们组合的效果与inset-0一致，但它们用的是老属性实现：

top: 0px;
bottom: 0px;
left: 0px;
right: 0px;

以上代码基本没有兼容性的顾虑。