@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的演示网站