Hello TailwindCSS/WindiCSS

8,179 阅读6分钟

前言

随着项目越来越大,你是不是觉得项目的 CSS 越来越难维护,常用的属性就是那么几个,来来回回的写,搞得你也很烦,如果是那么赶紧尝试用 ACSS 方案来解决你的问题吧,如果否,那说明你经历的项目还不够多不够大,这时候你要继续努力搬砖。

如果你不了解什么是 ACSS 的话,可以参考下我之前的教程: CSS 架构之 ACSS 。如果你想了解项目组织样式的演进历史,强烈建议你研读 TailwindCSS 作者 2017 年写的把 CSS 分为五个阶段的一篇文章:

读完你会彻底理解「为什么传统的 “语义化类名” 是 CSS 难以维护的原因」,详述了 CSS 的五个阶段,写的很棒,多看几遍。

回到 ACSS,ACSS 中目前最流行的框架就是我们文章的主角 TailwindCSS

image.png 但是,如果在项目中使用建议你使用 Windi CSS

https://windicss.org/

它们是一种继承关系,如何 TailwindCSS 是父类,那么 Windi CSS 就是子类。

当然你也可以认为 TailwindCSS 是 ES5,Windi CSS 是 JavaScript ,Windi CSSTailwindCSS 的基础上进行了扩展,还包括 ES6+ 的部分,这个我们留在 TailwindCSS 章节讲。

不过,你可以放心学习 TailwindCSS,它的语法在 Windi CSS,完全是可用的。

搭建一个环境

Windi CSS 如何安装结合其他框架使用,在 安装 章节非常清楚。

而且我们也没必要纠结 WIndiCSS 的大家过程,这些框架都会帮我们处理的,这里我们简单的搭建一个项目,方便接下里的演示:

mkdir WindiCSS-study && cd WindiCSS-study
➜  WindiCSS-study npm init -y
➜  WindiCSS-study npm install windicss -D

在 package.json 文件中的 script 字段,我们新增如下字段:

  "scripts": {
    "windicss:help": "windicss --help",
    "windicss:init": "windicss --init . --compile",
    "windicss:build": "windicss ./index.html -to windi-acss.css"
  },

接下来可以运行命令:

npm run windicss:init

项目根目录将会新增三个文件:

├── index.html
├── index.windi.html
├── package.json
└── windi.css

查看 index.html 的文件内容大致如下:

<!DOCTYPE html>
  <html lang="en">

  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>WindiCSS-study</title>
      <link rel="stylesheet" href="windi.css">
  </head>

  <body class="bg-gray-100">
      <div class="container mx-auto flex flex-col justify-center items-center h-screen">
          <div class="lg:flex shadow rounded-lg">
              <div class="bg-blue-500 rounded-t-lg lg:rounded-tr-none lg:rounded-l-lg lg:w-4/12 py-4 h-full flex flex-col justify-center">
                  <div class="text-center tracking-wide">
                      <div class="text-white font-bold text-8xl lg:text-4xl">24</div>
                      <div class="text-white font-normal text-4xl pt-4 lg:pt-0 lg:text-2xl">Sept</div>
                  </div>
              </div>
              <div class="w-full px-1 bg-white py-5 lg:px-2 lg:py-2 tracking-wide">
                  <div class="flex flex-row lg:justify-start justify-center">
                      <div class="text-gray-700 font-light text-sm text-center lg:text-left px-2">
                          1:30 PM
                      </div>
                      <div class="text-gray-700 font-light text-sm text-center lg:text-left px-2">
                          Organiser : IHC
                      </div>
                  </div>
                  <div class="text-gray-700 text-xl pb-1 text-center lg:text-left px-2">
                      Hello WindiCSS
                  </div>

                  <div class="text-gray-800 font-light text-sm pt-1 text-center lg:text-left px-2">
                      A-142/1, A-142, Ganesh Nagar, Tilak Nagar, New Delhi, 110018
                  </div>
              </div>
              <div class="flex flex-row items-center w-full lg:w-1/3 bg-white lg:justify-end justify-center px-2 py-4 lg:px-0 rounded-lg">
                  <span class="tracking-wider text-gray-600 cursor-pointer bg-gray-100 hover:bg-gray-200 px-4 py-2 text-sm rounded-lg leading-loose mx-2">
                      Going
                  </span>
              </div>
          </div>
      </div>
  </body>
  </html>

HTML 层面全部都是 ACSS 的写法,同时注意文件开头应用的样式:

 <link rel="stylesheet" href="windi.css">

我们对其重新命名:windi.css => windi-acss.css

现在我们运行命令:

# "windicss ./index.html -to windi-acss.css" 
# 使用 -o 参数指定生成 css 文件的名称, -t 参数指定是否添加预检样式 (基本样式)。
npm run windicss:build

这个命令会根据 HTML 的类名生成对应的 CSS,这是项目的目录结构为:

.
├── index.html
├── index.windi.html
├── package.json
├── windi-acss.css
└── windi.css

多了个文件 windi-acss.css 其内容为:

*, ::before, ::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}
* {
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59, 130, 246, 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
}
:root {
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
}
:-moz-focusring {
  outline: 1px dotted ButtonText;
}
:-moz-ui-invalid {
  box-shadow: none;
}
::moz-focus-inner {
  border-style: none;
  padding: 0;
}
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
  height: auto;
}
::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
[type='search'] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
abbr[title] {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}
body {
  margin: 0;
  font-family: inherit;
  line-height: inherit;
}
html {
  -webkit-text-size-adjust: 100%;
  font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  line-height: 1.5;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}
.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
}
.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgba(59, 130, 246, var(--tw-bg-opacity));
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}
.hover\:bg-gray-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-t-lg {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.cursor-pointer {
  cursor: pointer;
}
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.flex-row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}
.flex-col {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.items-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.justify-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.font-bold {
  font-weight: 700;
}
.font-normal {
  font-weight: 400;
}
.font-light {
  font-weight: 300;
}
.h-screen {
  height: 100vh;
}
.h-full {
  height: 100%;
}
.text-8xl {
  font-size: 6rem;
  line-height: 1;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.leading-loose {
  line-height: 2;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.shadow {
  --tw-shadow-color: 0, 0, 0;
  --tw-shadow: 0 1px 3px 0 rgba(var(--tw-shadow-color), 0.1), 0 1px 2px 0 rgba(var(--tw-shadow-color), 0.06);
  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.text-center {
  text-align: center;
}
.text-white {
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgba(55, 65, 81, var(--tw-text-opacity));
}
.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgba(31, 41, 55, var(--tw-text-opacity));
}
.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgba(75, 85, 99, var(--tw-text-opacity));
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.w-full {
  width: 100%;
}
@media (min-width: 1024px) {
  .lg\:rounded-l-lg {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
  }
  .lg\:rounded-tr-none {
    border-top-right-radius: 0px;
  }
  .lg\:flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
  }
  .lg\:justify-start {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
  }
  .lg\:justify-end {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
  }
  .lg\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
  .lg\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }
  .lg\:px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .lg\:py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .lg\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }
  .lg\:pt-0 {
    padding-top: 0px;
  }
  .lg\:text-left {
    text-align: left;
  }
  .lg\:w-4\/12 {
    width: 33.333333%;
  }
  .lg\:w-1\/3 {
    width: 33.333333%;
  }
}

现在可以在浏览器打开 index.html 文件了,看到效果是下面这样:

hello WindiCSS

优化项目

为了更好的演示和提升开发体验,我们需要对项目进行一些调整。

首先,就是增加热更新:

  "scripts": {
    "windicss:help": "windicss --help",
    "windicss:init": "windicss --init . --compile",
    "windicss:build": "windicss ./src/index.html -mto ./src/windi-minify.css",
    "windicss:watch": "windicss ./src/index.html -dto ./src/windi-acss.css"
  },

windicss:watch 命令添加了 -d 参数,开启开发环境下的热更新功能。

目录调整为如下结构:

.
├── package.json
└── src
    ├── index.html
    └── windi-acss.css

index.html 的内容替换为:

<!DOCTYPE html>
  <html lang="en">

  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>WindiCSS-study</title>
      <link rel="stylesheet" href="windi-acss.css">
  </head>

  <body class="bg-gray-100">
      <section class="flex justify-center  items-center min-h-screen text-pink-600 text-5xl">Hello WindiCSS!</section>
  </body>
  </html>

npm run windicss:watch 之后,打开浏览器看到:

image.png