Hello TailwindCSS/WindiCSS

preface

As the project is more and more big, whether you think CSS project more and more difficult to maintain, commonly used attributes is few, write back and forth, do you also tired, if it is so hurriedly try ACSS scheme to solve your problem, if not, it means that you experience enough project is not big enough, then you want to continue to work hard to move bricks.

If you don’t know what ACSS is, take a look at my previous tutorial: ACSS for CSS Architecture. If you want to understand the evolution of project organizational styles, I strongly recommend reading a 2017 article by TailwindCSS author that breaks CSS into five stages:

英文版 CSS Utility Classes and “Separation of Concerns”
CSS functional classes and separation of concerns

After reading this, you will thoroughly understand why traditional “semantic class names” are hard to maintain in CSS, detailing the five phases of CSS.

Back to ACSS, the most popular framework in ACSS by far is TailwindCSS, the subject of our article.

However, if you use it in your project, you are advised to use itWindi CSS.

They are a kind of inheritance relationship, if TailwindCSS is the parent class, then Windi CSS is the subclass.

Of course you can also think of TailwindCSS as ES5, Windi CSS as JavaScript, Windi CSS is an extension of TailwindCSS, including ES6+ parts, We’ll leave that to the TailwindCSS section.

However, you can rest assured to learn TailwindCSS, its syntax in Windi CSS, is completely available.

Set up an environment

How to install Windi CSS in conjunction with other frameworks is very clear in the installation section.

And we don’t need to tangle with the WIndiCSS process, these frameworks will help us deal with, here we simply set up a project, convenient for the next demonstration:

➜ mkdir WindiCSS - study &&cdWindicss-study ➜ windicss-study NPM init -y ➜ Windicss-study NPM install Windicss-dCopy the code

In the script field of package.json file, we added the following fields:

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

You can then run the command:

npm run windicss:init
Copy the code

Three files will be added to the project root directory:

├─ index.html ├─ ├─ package.json ├─ ├.cssCopy the code

The contents of the index.html file are as follows:

<! DOCTYPEhtml>
  <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>
Copy the code

The HTML layer is all written in ACSS style, and note the style applied at the beginning of the file:

 <link rel="stylesheet" href="windi.css">
Copy the code

Let’s rename it: windi.css => windi-acss.css.

Now we run the command:

# "windicss ./index.html -to windi-acss.css" 
# Use the -o argument to specify the name of the generated CSS file, and the -t argument to specify whether to add pre-checked styles (basic styles).
npm run windicss:build
Copy the code

This command will generate the CSS corresponding to the HTML class name. This is the directory structure of the project:

.├ ── Index.html ├── ├.html ├─ Package.json ├── ├.css ├── ├.cssCopy the code

There is a file windi-acss. CSS which says:

*, ::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.5 rem;
}
.rounded-t-lg {
  border-top-left-radius: 0.5 rem;
  border-top-right-radius: 0.5 rem;
}
.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.25 rem;
  line-height: 2.5 rem;
}
.text-sm {
  font-size: 0.875 rem;
  line-height: 1.25 rem;
}
.text-xl {
  font-size: 1.25 rem;
  line-height: 1.75 rem;
}
.leading-loose {
  line-height: 2;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.mx-2 {
  margin-left: 0.5 rem;
  margin-right: 0.5 rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.px-1 {
  padding-left: 0.25 rem;
  padding-right: 0.25 rem;
}
.py-5 {
  padding-top: 1.25 rem;
  padding-bottom: 1.25 rem;
}
.px-2 {
  padding-left: 0.5 rem;
  padding-right: 0.5 rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.py-2 {
  padding-top: 0.5 rem;
  padding-bottom: 0.5 rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pb-1 {
  padding-bottom: 0.25 rem;
}
.pt-1 {
  padding-top: 0.25 rem;
}
.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.025 em;
}
.tracking-wider {
  letter-spacing: 0.05 em;
}
.w-full {
  width: 100%;
}
@media (min-width: 1024px) {
  .lg\:rounded-l-lg {
    border-top-left-radius: 0.5 rem;
    border-bottom-left-radius: 0.5 rem;
  }
  .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.25 rem;
    line-height: 2.5 rem;
  }
  .lg\:text-2xl {
    font-size: 1.5 rem;
    line-height: 2rem;
  }
  .lg\:px-2 {
    padding-left: 0.5 rem;
    padding-right: 0.5 rem;
  }
  .lg\:py-2 {
    padding-top: 0.5 rem;
    padding-bottom: 0.5 rem;
  }
  .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%; }}Copy the code

Now you can open the index.html file in your browser and see something like this:

To optimize the project

In order to better demonstrate and improve the development experience, we needed to make some changes to the project.

First, add hot updates:

  "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"
  },
Copy the code

Windicss: Watch adds the -d parameter to enable hot update in the development environment.

Change the directory structure to the following:

.├ ── ├─ ├─ download.txt ├─ ├─ download.txtCopy the code

Replace the contents of index.html with:

<! DOCTYPEhtml>
  <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>
Copy the code

After NPM run Windicss :watch, open the browser and see:

preface

Set up an environment

To optimize the project

Related Posts

“Do you want to run?” Gimmicks or strength?

How does NodeJS implement non-blocking asynchronous IO?

Vue +TypeScript notes