@johnhom/style-config

一个tailwindcss或者windicss的preset，默认的css单位使用px。

安装

yarn add -D @johnhom/style-config 

# 或者 npm install -D @johnhom/style-config

导入createPreset

在tailwind.config.js或者windi.config.js文件下，导入@johnhom/style-config:

const { createPreset } = require('@johnhom/style-config');

module.exports = {
  presets: [
    createPreset({
      unit: 'px'
    })
  ]
}

预设值

createPreset会创建一个预设的值，默认的css单位使用px，具体生成的预设值如下：

宽度和高度的值 Width、Height

可以直接使用的具体的值范围为：0~800整数。

示例：

<div class="w-456 h-678 min-h-500"></div>

同时还支持一下的类（与官方默认值相同）：

宽度：

| 类名 | 属性 | |--------|-----------| | w-auto | width: auto; | | w-full | width: 100%; | | w-screen | width: 100vh; | | w-min | width: min-content; | | w-max | width: max-content; | | w-fit | width: fit-content; |

高度

| 类名 | 属性 | |--------|-----------| | h-auto | height: auto; | | h-full | height: 100%; | | h-screen | height: 100vh; | | h-min | height: min-content; | | h-max | height: max-content; | | h-fit | height: fit-content; |

padding 和 margin

padding可以直接使用的具体的值范围为：0~200，步长0.5。

margin可以直接使用的具体的值范围为：-200~200，步长0.5。

示例：

<div class="-mr-150 pt-200"></div>

同时还支持一下的类（与官方默认值相同）：

| 类名 | 属性 | |--------|-----------| | p-auto | padding: auto; | | m-auto | margin: auto; |

fontSize

font-size可以直接使用的具体的值范围为：1~200，步长0.5，每个值都会默认的会给一个line-height: 1

示例：

<div class="text-40"></div>

同时还支持一下的类：

| 类名 | 属性 | |--------|-----------| | text-0 | font-size: 0px; | | text-inherit | font-size: inherit; |

TODO

• [ ] 新增一个tailwindcss的演示网站