tailwindcss-1920 v2.0.2

tailwindcss-1920

概述

用 rem 配合 vw 适配 pc 网页的 tailwindcss 预设。

安装和配置

1. 安装

yarn add tailwindcss-1920 -D

2. 在 tailwind.config.js 文件中引入并使用预设

   module.exports = {
     presets: [
       require('tailwindcss-1920')({
           px: 1920,	// 设计稿尺寸 (默认1920)
           bodyFontSize: 16	// body 的字体大小，用于覆盖 html 的字体大小（不填则不重置fontSize字体大小）
       })
     ]
   }

   若传入了 bodyFontSize 参数，则在 body 标签中添加字体大小的属性：

   body {
   	font-size: 0.08333333333333333rem;	// 10 / px / bodyFontSize
   }

3. 配置 vscode 插件 Tailwind CSS IntelliSense 打开项目根目录中的 .vscode/settings.json，如果没有就创建它 "tailwindCSS.rootFontSize"的参数是上一步的 px 参数（设计稿尺寸）除以 10

{
  "tailwindCSS.rootFontSize": 192
}

使用

spacing 单位以30以内，100 以内 2 的倍数，400 以内 5 的倍数，1900（设计稿尺寸减 20） 以内 20 的倍数。

如： w-1，w-2，w-3……w-96，w-98，w-100……w-390，w-395，w-400……w-1860，w-1880，w-1900

字体单位在 12—192 之间，如：text-12，text-13……text-95（设计稿尺寸除以 20 -1）