tailwind-presets: 自己常用的 tailwind 预设

安装

yarn add --dev @jswork/tailwind-presets

配置 tw.config.js

import twPresets from '@jswork/presets-tailwind';

/** @type {import('tailwindcss').Config} */
export default {
  presets: [twPresets],
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',
    './src/*.{js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {}
  },
  plugins: []
};

功能点介绍

功能代码

补充 spacing 1-100 的范围

功能	代码
补充 spacing 1-100 的范围	`<div className="p-25">YOUR_CONTENT</div>`
@jswork/tailwind-blank	`<!-- 添加 y 方向上的空行 --> <h1>heading</h1> <div className="blank-y-10"></div>`
@jswork/tailwind-font-size	`<!-- 添加1-100大小的 font-size，是以px(f-55，就是大小于55的字体大小)为计量，但以 rem 为输出 --> <div className="f-64">64px大小的字符</div>`

<div className="p-25">YOUR_CONTENT</div>

@jswork/tailwind-blank

<!-- 添加 y 方向上的空行 -->
<h1>heading</h1>
<div className="blank-y-10"></div>

@jswork/tailwind-font-size

<!-- 添加1-100大小的 font-size，是以px(f-55，就是大小于55的字体大小)为计量，但以 rem 为输出 -->
<div className="f-64">64px大小的字符</div>