Git Product home page Git Product logo

weapptailwind's Introduction

Tailwind CSS for WeChatApp

不会给原生小程序配置 Tailwind,所以干脆自己提取一个(技术太菜了

介绍

TailwindCSS For WeChatApp 原本提取代码来源于TailwindCssForWechatMiniProgarm,现在自己通过 tailwindcss 的配置文件进行删减修改

还是感谢大佬之前的提取!!!!

使用

  1. 直接将 tailwind.min.wxss 引入到 app.wxss 便可全局生效
  2. tailwind.wxss是删减后的完整版,未压缩
  3. 因为使用中有很多用不到的代码,可根据自身需要进行删减
  4. 如果要新增样式,建议在app.wxss中进行修改
  5. 注意:小程序不支持 * ,请删除,不然会报错!
    1. 2.2.0 版本加入 minify ,自动删除 * 通配符并且压缩

精简

  • tailwind.css中精简了小程序中用不到的样式,删去了注释,保留其他全部内容(方便自己定制)
  • tailwind.wxss中精简了我个人使用中不常用的样式(渐变、带负数的样式),如需定制,可以在tailwind.config.js 或者 tailwind.wxss 中修改,或者在 app.wxss 中自行添加定制化
    • 带负数的样式
    • 带小数点的样式
    • grid, table (因为我自己不常用,如果需要可自己配置~)
    • 不常使用,定制化比较高的样式(比如 transform, inset 等)
  • tailwind.min.wxss则是压缩成一行后的代码(尽力精简到80KB左右了)

根据小程序的 WXSS 修改的 TailwindCSS

  1. 基于 TailwindCSS 2.2.16 版本
  2. 去掉了所有 Variants: 比如focus: hover:等(在小程序中可以使用组件的属性实现,比如 button 组件 hover-class 属性)
  3. 删去了部分小程序中用不到的代码
  4. 去掉了所有的 media query: 比如sm: md:等(在小程序中可以使用 MediaMatch 组件代替)
  5. 重命名了一些样式:
    1. 小数点: 比如 1.5 => 1dot5
    2. 斜杆: 比如 1/2=> 1on2;
  6. 已经将 rem 转换为 rpx
    • rem - px 转换根据 1rem = 16px 进行换算
    • px - rpx 转换根据 1px = 2rpx 进行换算

用法

Install ⛑️

npm install # or pnpm install

Build 🔧

npm run build # or pnpm build

build 之后会在 dist 文件夹中得到一个根据 tailwind.config.js 文件生成的完整 css ,但里面还是会有不需要的内容,可自行根据需要增删改和配置 tailwind.config.js 文件

dist 文件夹中还有会有个 tailwind.min.wxss 是删除通配符后并且压缩后的文件,可直接在小程序中使用

注意:tailwind.css 里面会存在 * 通配符,记得删掉,因为小程序不支持

参考文档官方文档

如果需要完整的配置文件自己增删改,请运行命令行,运行前请删除 tailwind.config.js 文件

npx tailwindcss init --full

weapptailwind's People

Contributors

mrleidesen avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

weapptailwind's Issues

提示WXSS 文件编译错误

[ WXSS 文件编译错误]
./tailwind.min.wxss(1:61069): unexpected token *(env: Windows,mp,1.05.2110110; lib: 2.15.0)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.