my-tailwindcss
v1.0.1
Published
轻量级的类似 Tailwind CSS 的样式库，提供了常用的 CSS 工具类，可以快速构建现代化的用户界面。支持UniApp和小程序环境。
Maintainers
jack-huangReadme
My TailwindCSS
轻量级的类似 Tailwind CSS 的样式库，提供了常用的 CSS 工具类，可以快速构建现代化的用户界面。支持普通Web项目、UniApp和小程序环境。
项目状态
✅ 已完全修复Sass模块系统 - 项目现在可以正常构建和运行
- ✅ 完全迁移到现代Sass
@use模块系统 - ✅ 修复了所有变量未定义的问题
- ✅ 统一了变量导入方式，所有工具类文件都正确导入
variables.scss - ✅ 解决了
$is-uniapp、$breakpoints、$spacers、$colors、$shadows等变量的访问问题 - ✅ 优化了文件结构，确保变量在所有需要的地方都可以正确访问
- ✅ 编译测试通过，生成了完整的CSS文件（180,519行）
特性
- 轻量级：精简的代码体积，只包含最常用的工具类
- 响应式：内置响应式断点，轻松构建适配各种屏幕尺寸的界面
- 可定制：基于SASS构建，可以根据需要定制和扩展
- 兼容性：支持现代浏览器和IE11
- UniApp支持：特别优化以支持UniApp项目和小程序环境
- 使用Vite构建：更快的构建速度和更好的开发体验
安装
方法1：直接下载
从GitHub仓库下载最新的构建文件，并将其添加到你的项目中：
- 普通Web项目：使用
dist/my-tailwindcss.css - UniApp项目：使用
dist/my-tailwindcss.uniapp.css
方法2：使用npm
npm install my-tailwindcss --save使用方法
在普通Web项目中使用
- 直接下载
下载dist目录中的my-tailwindcss.css文件，然后在HTML中引入：
<link rel="stylesheet" href="path/to/my-tailwindcss.css">- 通过npm安装
npm install my-tailwindcss然后在你的项目中导入：
// 自动检测环境（推荐）
import 'my-tailwindcss';
// 或者明确指定Web版本
import 'my-tailwindcss/web';
// 或者使用CommonJS
require('my-tailwindcss');在UniApp项目中使用
- 直接下载
下载dist目录中的my-tailwindcss.uniapp.css文件，然后在项目中引入：
/* 在App.vue的style标签中引入 */
@import './path/to/my-tailwindcss.uniapp.css';- 通过npm安装
npm install my-tailwindcss然后在你的项目中导入：
// 自动检测环境（推荐）
// 在UniApp环境中会自动加载UniApp版本
import 'my-tailwindcss';
// 或者明确指定UniApp版本
import 'my-tailwindcss/uniapp';环境自动检测
当你使用 import 'my-tailwindcss' 导入库时，它会自动检测当前环境：
- 如果检测到UniApp、微信小程序或支付宝小程序环境，会自动加载UniApp版本（使用rpx单位）
- 否则会加载普通Web版本（使用rem单位）
你也可以通过导出的API检查当前使用的平台：
import MyTailwindCSS from 'my-tailwindcss';
console.log(MyTailwindCSS.platform); // 'web' 或 'uniapp'开发指南
项目构建
本项目使用Vite进行构建，提供了以下构建命令：
# 构建Web版本
npm run build
# 构建UniApp版本
npm run build:uniapp
# 构建JS版本
npm run build:js
# 构建所有版本
npm run build:all
# 开发模式（Web版本）
npm run dev
# 开发模式（UniApp版本）
npm run dev:uniapp
# 开发模式（JS版本）
npm run dev:js
# 预览构建结果
npm run preview项目结构
├── dist/ # 构建输出目录
├── examples/ # 示例文件
├── src/ # 源代码
│ ├── index.js # 主入口文件（自动检测环境）
│ ├── index-web.js # Web版本入口文件
│ ├── index-uniapp.js # UniApp版本入口文件
│ └── styles/ # 样式文件
│ ├── base/ # 基础样式
│ ├── mixins/ # 混合宏
│ ├── utilities/ # 工具类
│ ├── custom.scss # 自定义样式
│ └── index.scss # 样式入口文件
├── vite.config.js # Vite配置文件（Web版本）
├── vite.uniapp.config.js # Vite配置文件（UniApp版本）
└── vite.js.config.js # Vite配置文件（JS版本）工具类参考
布局
容器
.container: 响应式容器，在不同断点下有不同的最大宽度
显示
.block: 块级元素.inline: 内联元素.inline-block: 内联块级元素.flex: Flex容器.grid: Grid容器.hidden: 隐藏元素
Flex布局
Flex方向
.flex-row: 水平方向（默认）.flex-row-reverse: 水平方向反转.flex-col: 垂直方向.flex-col-reverse: 垂直方向反转
Flex换行
.flex-wrap: 换行.flex-nowrap: 不换行.flex-wrap-reverse: 反向换行
主轴对齐
.justify-start: 起点对齐.justify-end: 终点对齐.justify-center: 居中对齐.justify-between: 两端对齐.justify-around: 环绕对齐.justify-evenly: 均匀对齐
交叉轴对齐
.items-start: 起点对齐.items-end: 终点对齐.items-center: 居中对齐.items-baseline: 基线对齐.items-stretch: 拉伸对齐
Grid布局
.grid-cols-{n}: 网格列数（1-12）.gap-{size}: 网格间距
间距
外边距
.m-{size}: 四周外边距.mt-{size}: 上外边距.mr-{size}: 右外边距.mb-{size}: 下外边距.ml-{size}: 左外边距.mx-{size}: 水平外边距.my-{size}: 垂直外边距
内边距
.p-{size}: 四周内边距.pt-{size}: 上内边距.pr-{size}: 右内边距.pb-{size}: 下内边距.pl-{size}: 左内边距.px-{size}: 水平内边距.py-{size}: 垂直内边距
其中 {size} 可以是：0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64
尺寸
宽度
.w-{fraction}: 百分比宽度（1/2, 1/3, 2/3, 1/4, 3/4, 1/5, 2/5, 3/5, 4/5, 1/6, 5/6）.w-full: 100%宽度.w-screen: 视口宽度.w-auto: 自动宽度
高度
.h-{fraction}: 百分比高度.h-full: 100%高度.h-screen: 视口高度.h-auto: 自动高度
排版
字体大小
.text-xs: 超小字体.text-sm: 小字体.text-base: 基础字体.text-lg: 大字体.text-xl: 超大字体.text-2xl到.text-6xl: 更大的字体
字体粗细
.font-thin: 100.font-extralight: 200.font-light: 300.font-normal: 400.font-medium: 500.font-semibold: 600.font-bold: 700.font-extrabold: 800.font-black: 900
文本对齐
.text-left: 左对齐.text-center: 居中对齐.text-right: 右对齐.text-justify: 两端对齐
颜色
文本颜色
.text-{color}: 文本颜色
背景颜色
.bg-{color}: 背景颜色
其中 {color} 可以是：primary, secondary, success, danger, warning, info, light, dark, white, black, gray-{n}（100-900）
边框
边框宽度
.border: 1px边框.border-0: 无边框.border-2: 2px边框.border-4: 4px边框.border-8: 8px边框
边框颜色
.border-{color}: 边框颜色
边框圆角
.rounded: 默认圆角.rounded-sm: 小圆角.rounded-md: 中圆角.rounded-lg: 大圆角.rounded-full: 完全圆角.rounded-none: 无圆角
效果
阴影
.shadow: 默认阴影.shadow-sm: 小阴影.shadow-md: 中阴影.shadow-lg: 大阴影.shadow-xl: 超大阴影.shadow-2xl: 特大阴影.shadow-none: 无阴影
不透明度
.opacity-{n}: 不透明度（0, 25, 50, 75, 100）
响应式
所有工具类都可以通过添加响应式前缀来实现在特定断点下的样式：
sm:: 640px及以上md:: 768px及以上lg:: 1024px及以上xl:: 1280px及以上xxl:: 1536px及以上
例如：md:flex 表示在中等屏幕及以上使用flex布局。
UniApp和小程序特定类
.mp-hidden: 在小程序环境中隐藏.mp-block: 在小程序环境中显示为块级元素.mp-flex: 在小程序环境中显示为flex容器.wx-only: 仅在微信小程序中显示.alipay-only: 仅在支付宝小程序中显示
自定义构建
自定义边距
你可以在src/styles/custom.scss文件中自定义边距值，添加自己需要的间距类：
// 自定义间距配置
// 用户可以在这里添加自己的自定义间距值
// 格式为: 键(数字): 值(带单位)
// 例如: 100: 25rem 表示创建 .p-100, .m-100 等类，值为25rem (400px)
$custom-spacers: () !default;
// 添加默认的自定义间距值
// 用户可以修改这些值或添加新的值
$custom-spacers: map-merge((
// 键: 值(rem单位)
100: 25rem, // 400px
200: 50rem, // 800px
300: 75rem, // 1200px
400: 100rem, // 1600px
500: 125rem, // 2000px
// 在这里添加更多自定义间距值
// 例如:
// 150: 37.5rem, // 600px
// 250: 62.5rem, // 1000px
), $custom-spacers) !global;这将生成以下工具类：
.p-100,.pt-100,.pr-100,.pb-100,.pl-100,.px-100,.py-100.m-100,.mt-100,.mr-100,.mb-100,.ml-100,.mx-100,.my-100- 以此类推...
你可以根据需要添加任意数量的自定义间距值，只需在$custom-spacers映射中添加新的键值对即可。
单位配置
在UniApp和小程序环境中，你可以配置使用rpx单位来实现更好的适配效果。在src/styles/base/variables.scss文件中，可以修改以下配置：
// 单位配置
$unit-config: (
enable-rpx: false, // 是否启用rpx单位（在UniApp环境中自动设置为true）
base-font-size: 16px, // 基础字体大小
rpx-ratio: 2 // rpx与px的转换比例，通常为2（1px = 2rpx）
);当enable-rpx设置为true时，所有使用rem和px单位的值都会自动转换为rpx单位。在UniApp环境中，该值会自动设置为true。
构建命令
如果你想自定义构建，可以克隆仓库并修改源代码：
# 克隆仓库
git clone [repository-url]
# 安装依赖
npm install
# 构建普通Web版本CSS
npm run build
# 构建UniApp版本CSS
npm run build:uniapp
# 构建JS文件（包括主入口、Web版和UniApp版）
npm run build:js
# 构建所有版本（CSS和JS）
npm run build:all示例
查看 examples 目录中的示例文件，了解如何使用各种工具类：
examples/index.html: 普通Web项目示例examples/uniapp-example.vue: UniApp项目示例examples/custom-spacing-example.html: 自定义边距示例
浏览器兼容性
- Chrome（最新版）
- Firefox（最新版）
- Safari（最新版）
- Edge（最新版）
- IE 11
- iOS 8+
- Android 4+
许可证
MIT