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

自己开发的一个tailwindcss实用包
更新于: 2024-06-02 09:41:25
项目主页: https://github.com/afeiship/tailwind-packages

安装

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 的范围
<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>