preface

In fact, I have seen Windi CSS last year, only a superficial understanding, know that “Windi CSS is the next generation of tool-first CSS framework” (the official website description), did not go to in-depth understanding of the practice.

Recently, I took some time to study it. It was a new experience. Most CSS styles can be included in just one line of code, and it is really convenient to use.

Compared with me, who is used to writing less and Sass, there will still be some learning costs involved. Although our company’s project will also have a global SCSS file defining some common tool classes, the variety is limited after all. In future projects, we can also consider whether we can choose to use Windi CSS instead.

Windi CSS is introduced

Windicss is a tailwindCSS-inspired library that is compatible with Tailwindcss and offers faster load times and hot updates.

For us, WindicSS is a library of components that we can get used to quickly. It has built-in classes such as Flex, Kitems-Center, ML-8, bG-Purple-600, and so on that we don’t have to write CSS. And only the utility classes we use produce the corresponding CSS; Not only that, Windicss also provides other more powerful functions for us to use, next to experience it.

Windi use CSS

Install the configuration

I use Vite2 + vue3 here to experience Windi CSS

First install dependencies

pnpm i -D vite-plugin-windicss windicss
Copy the code

Add the plug-in to the viet.config. ts configuration file

import WindiCSS from 'vite-plugin-windicss'

export default {
  plugins: [
    WindiCSS(),
  ],
}
Copy the code

Then import the styles in the entry file main.ts
```
import "virtual:windi.css";
Copy the code
```
Finally, create the Windi CSS configuration file windi.config.ts
```
import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  /* Configuration item... * /
})
Copy the code
```
By default, Windi CSS searches for configuration files in your project root directory. Here are the valid names:
- windi.config.ts
- windi.config.js
- tailwind.config.ts
- tailwind.config.js

The basic use

Simple use of Windi CSS tool classes, compared with the normal use of SASS between the difference is obvious, specific tool classes can refer to the official website.

<template>
  <div>
    <h3>Windi using CSS</h3>
    <div class="flex items-center justify-around bg-teal-100 rounded-md p-4px w-192px">
      <div class="w-[25%] h-12 bg-red-400 rounded-md m-4px"></div>
      <div class="w-[25%] h-12 bg-green-400 rounded-md m-4px"></div>
      <div class="w-[25%] h-12 bg-blue-400 rounded-md m-4px"></div>
    </div>
    <br>
    
    <h3>Use normal Sass</h3>
    <div class="card">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.card {
  width: 200px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 4px;
  border-radius: 6px;
  background-color: rgb(204.251.241);

  .box {
    width: 48px;
    height: 48px;
    margin: 4px;
    border-radius: 6px;
  }

  .box:nth-child(1) {
    background-color: rgb(248.113.113);
  }

  .box:nth-child(2) {
    background-color: rgb(52.211.153);
  }

  .box:nth-child(3) {
    background-color: rgb(96.165.250); }}</style>
Copy the code

Automatic value derivation

As you can see from the above code, Windi CSS provides automatic value derivation. You can use any value in the class name and then generate the corresponding style, which is much easier to use than using standard SASS. Such as:

w-192pxCan be automatically resolved towidth: 192px;
w-[25%]Can be automatically resolved towidth: 25%;Is also equivalent towidth: 48px;
h-12Can be automatically resolved toheight: 3rem;According to the font size of the current root elementheight: 48px;

Important prefix

Using important in Windi CSS is also very convenient, just use it in front of any utility class! Prefix, make them become! Overriding the properties specified in the previous style rule.

For example, add w-192px! The prefix for! w-192px

<h3>Windi using CSS</h3>
<div class="flex items-center justify-around bg-teal-100 rounded-md p-4px ! w-192px">
  <div class="w-[25%] h-12 bg-red-400 rounded-md m-4px"></div>
  <div class="w-[25%] h-12 bg-green-400 rounded-md m-4px"></div>
  <div class="w-[25%] h-12 bg-blue-400 rounded-md m-4px"></div>
</div>
Copy the code

Shortcuts

There can be a lot of repetitive code when we often use the same set of utility classes, but Windi CSS provides the Shortcuts feature that lets you group the names of utility classes together to create a new name and use it anywhere without having to use a lot of repetitive code.

Add shortcuts field in the Windi CSS configuration file windi.config.ts:

export default {
  theme: {
    / *... * /
  },
  shortcuts: {
    'box view': 'w-[25%] h-12 rounded-md m-4px',}}Copy the code

You can change the page code to look like this. The page looks the same, but the code is much cleaner.

<h3>Windi using CSS</h3>
<div class="flex items-center justify-around bg-teal-100 rounded-md p-4px w-192px">
    <div class="bg-red-400 box-view"></div>
    <div class="bg-green-400 box-view"></div>
    <div class="bg-blue-400 box-view"></div>
</div>
Copy the code

Responsive design

It is also easy to implement responsive design in Windi CSS. You only need to add the prefix of variant to the corresponding tool class, such as MD: and LG:.

The breakpoint

The default with<The prefix with@The prefix

sm (min-width: 640px) (Max – width: 639.9 px) (min-width: 640px) and (max-width: 767.px)

md (min-width: 768px) (Max – width: 767.9 px) (min-width: 768px) and (max-width: 1023.9px)

lg (min-width: 1024px) (Max – width: 1023.9 px) (min-width: 1024px) and (max-width: 1279.9px)

xl (min-width: 1280px) (Max – width: 1279.9 px) (min-width: 1280px) and (max-width: 1535.9px)

2xl (min-width: 1536px) (Max – width: 1535.9 px) (min-width: 1536px)

	The default	with`<`The prefix	with`@`The prefix
sm	(min-width: 640px)	(Max – width: 639.9 px)	(min-width: 640px) and (max-width: 767.px)
md	(min-width: 768px)	(Max – width: 767.9 px)	(min-width: 768px) and (max-width: 1023.9px)
lg	(min-width: 1024px)	(Max – width: 1023.9 px)	(min-width: 1024px) and (max-width: 1279.9px)
xl	(min-width: 1280px)	(Max – width: 1279.9 px)	(min-width: 1280px) and (max-width: 1535.9px)
2xl	(min-width: 1536px)	(Max – width: 1535.9 px)	(min-width: 1536px)

<h3>Windi using CSS</h3>
<div class="flex items-center justify-around bg-teal-100 rounded-md p-4px ! w-192px">
    <div class="lg:bg-red-400 md:bg-red-200 sm:bg-red-100 box-view"></div>
    <div class="bg-green-400 box-view"></div>
    <div class="bg-blue-400 box-view"></div>
</div>
Copy the code

At different breakpoints, the effect is as follows:

In addition, you can customize breakpoints based on your business requirements and configure them in Windi.config. ts, such as tablet, laptop…

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  theme: {
    screens: {
      tablet: '640px'.laptop: '1024px'.desktop: '1280px',}}})Copy the code

instruction

Windi CSS also provides five instructions that can be used with CSS for better use.

@apply

You can use @apply on some existing utility classes on the same line in the Style block to do the same job as Shortcuts and extract them into a generic utility class.

<template>
  <div>
    <! -- Using Windi CSS-->
    <h3>Windi using CSS</h3>
    <div class="flex items-center justify-around bg-teal-100 rounded-md p-4px w-192px">
      <div class="bg-red-400 box-view2"></div>
      <div class="bg-green-400 box-view2"></div>
      <div class="bg-blue-400 box-view2"></div>
    </div>
    <br>.</template>

<style lang="scss" scoped>..box-view2 {
  @apply w-[25%] h-12 rounded-md m-4px;
}
</style>
Copy the code

@variants

We can also use the CSS toolclass definitions wrapped in @variants to generate toolclasses with some screen variants, state variants and theme variants.

<template>
  <div>
    <! -- Using Windi CSS-->
    <h3>Windi using CSS</h3>
    <div class="flex items-center justify-around bg-teal-100 rounded-md p-4px w-192px">
      <div class="bg-red-400 box-view2"></div>
      <div class="bg-green-400 box-view2"></div>
      <div class="bg-blue-400 box-view2"></div>
    </div>
    <br>.</template>

<style lang="scss" scoped>..box-view2 {
  @apply w-[25%] h-12 rounded-md m-4px;
}

@variants focus, hover {
  .box-view2 {
    @apply bg-red-200; }}</style>
Copy the code

@screen

The @screen directive allows us to do media queries by referring to breakpoints by name instead of copying the values in your CSS.

<style lang="scss" scoped>
...

.box-view2 {
  @apply w-[25%] h-12 rounded-md m-4px;
}

// lg is the breakpoint (min-width: 1024px)
@screen lg {
  .box-view2 {
    @apply bg-red-200; }}// The effect is the same up and down
@media (min-width: 1024px) {
  .box-view2{
    // background-color: rgba(254, 202, 202) = bg-red-200
    background-color: rgba(254.202.202)
  }
}
</style>
Copy the code

@layer

The @layer directive is used to confirm the order of each class. The legal hierarchy is base, Components, and utilities.

I did not use this command too much. If you are interested, you can study it by yourself and temporarily post a code provided by the official:

theme()

The theme() function lets us use the. Operator to get the desired value.

<template>
  <div>
    <! -- Using Windi CSS-->
    <h3>Windi using CSS</h3>
    <div class="flex items-center justify-around bg-teal-100 rounded-md p-4px w-192px">
      <div class="bg-red-400 box-view2 light-red"></div>
      <div class="bg-green-400 box-view2"></div>
      <div class="bg-blue-400 box-view2"></div>
    </div>
    <br>.</template>

<style lang="scss" scoped>..box-view2 {
  @apply w-[25%] h-12 rounded-md m-4px;
}

.light-red {
  background-color: theme("colors.red.200");
}
</style>
Copy the code

Attribute mode

Attribute customization is optional by default in Windi CSS and can be enabled in your Windi.config. ts configuration and used as needed.

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  attributify: true,})Copy the code

We can change our above code to the following way, which has the same effect as the above mentioned responsive design, but it will make our directory clearer.

<h3>Windi using CSS</h3>
<div class="flex items-center justify-around bg-teal-100 rounded-md p-4px w-192px">
    <div
        lg="bg-red-400 box-view"
        md="bg-red-200 box-view"
        sm="bg-red-100 box-view"
      ></div>
    <div class="bg-green-400 box-view"></div>
    <div class="bg-blue-400 box-view"></div>
</div>
Copy the code

If you are worried about naming conflicts, you can attribute custom prefixes in the Windi.config. ts configuration:

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  attributify: {
    prefix: 'w:',}})Copy the code

<h3>Windi using CSS</h3>
<div class="flex items-center justify-around bg-teal-100 rounded-md p-4px w-192px">
    <div
        w:lg="bg-red-400 box-view"
        w:md="bg-red-200 box-view"
        w:sm="bg-red-100 box-view"
      ></div>
    <div class="bg-green-400 box-view"></div>
    <div class="bg-blue-400 box-view"></div>
</div>
Copy the code

Similarly, it is also convenient to group by utility class:

The Plugin plug-in

Windi CSS official and community provides many plugins for us to use, let us operate CSS more convenient and efficient, and we can also through the Windi CSS interface, to develop their own plug-ins.

The plugin also needs to be introduced in the windi.config.ts configuration file of the Windi CSS.

export default {
  theme: {
    // ...
  },
  // Import plug-ins
  plugins: [
    require('windicss/plugin/typography'),
    // ...],}Copy the code

And the plug-in function is also very powerful, interested can also explore their own:

Typography: a typography plug-in
Filters: plugins for filters
Plugin-animations: an animation plugin
…

VS Code plug-in

Windi CSS also provides a plug-in for the VS Code compiler called Windi CSS Intellisense, which can be found and installed directly in the VS Code plug-in store to provide a better Windi development experience. For example: Auto-completion, syntax highlighting, code folding and building are just as easy as writing standard CSS.

Autocomplete: Features intelligent suggestions for Utilities and variants.
Hover preview: Hover over a class name to see its full CSS.
Syntax highlighting: Highlight utility classes, modifiers, and important sections.
Color Preview: Preview colors and chromatograms.
Code folding: Collapse super-long classes to improve readability.
Compilation command: built-in compilation command, one-click operation.

Other features

In addition, Windi CSS has a lot of features that I haven’t studied yet, and it’s very powerful.

The dark patternWindi CSS has dark mode support out of the box, just add variable modifier prefixes to utility classesdark:Can be
RTL: Windi CSS has right-to-left (RTL) writing support out of the box, and no configuration is required except for the addition of utility classesrtl:The variable modifier prefix is
Visual Analyzer: a visual analysis tool for Windi CSS. Browse all your utilities usage, take a look at your design system, identify “bad use”, and much more!
…

Windi CSS summary

advantages

Compared with the traditional CSS, Windi CSS can really make a person’s eyes shine, it has a large number of built-in tool classes can really solve most of the business needs, but also better CSS class reuse; It also has a lot of built-in functionality, from Shortcuts and responsiveness to commands and plugins that make it easier to develop. There are also many third-party components that provide Windi CSS support, such as Slidev, which I wrote about in my last article.

In short, Windi CSS is intended to be a universal and customizable CSS “component library” that saves us a lot of time and cost in the early stages of thinking about how to complete and write the style well, while also allowing us to develop a good set of development and UI specifications.

disadvantages

Of course, it may not be a weakness, but for my personal opinion.

The large number of tool classes and features can also increase the cost of learning in the short term, as well as the cost of reading as you continue to develop your project, which does add some team burden on projects that are co-maintained by multiple people. At the same time, the large number of utility classes used in many classes on the page can greatly reduce the elegance of the code, resulting in a crowded HTML structure. And the CSS world is rich and colorful, a lot of styles also need CSS with JS to use, only with a Windi CSS can meet all our needs? When we use Windi CSS with third party components, we can be sure that there are no problems.

The earlier Tailwind CSS was at the center of the controversy, and Windi CSS was only seen as an on-demand Tailwind alternative, so Windi CSS still needs to stand the test of time.

Write in the last

Whether you continue to use less/SASS for your project or use one of those atomic-style CSS frameworks, Windi CSS/Tailwind CSS, it’s important to find one that fits your needs and your team’s needs.

If you are also interested in Windi CSS, also go to your own hands-on operations, may bring you unexpected harvest.

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Windi CSS and the practical experience in VUE3

preface

Windi CSS is introduced

Windi use CSS

Install the configuration

The basic use

Automatic value derivation

Important prefix

Shortcuts

Responsive design

The breakpoint

instruction

@apply

@variants

@screen

@layer

theme()

Attribute mode

The Plugin plug-in

VS Code plug-in

Other features

Windi CSS summary

advantages

disadvantages

Write in the last

Windi CSS and the practical experience in VUE3

preface

Windi CSS is introduced

Windi use CSS

Install the configuration

The basic use

Automatic value derivation

Important prefix

Shortcuts

Responsive design

The breakpoint

instruction

@apply

@variants

@screen

@layer

theme()

Attribute mode

The Plugin plug-in

VS Code plug-in

Other features

Windi CSS summary

advantages

disadvantages

Write in the last

Related Posts

4 ways to understand the React component communication easily

Interviewer: Familiar with CSS weights

Encapsulate AXIOS in VUE and realize unified management of API interface