• The author: jiayinkong
• CSS features and applications

Windi CSS is a CSS framework that is different from CSS preprocessors. Before learning Windi CSS, it is best to have the psychological preparation of “its writing habits are greatly different”, and then to accept it and learn it.

Know Windi CSS

Windi CSS is inspired by Tailwindcss, which has a faster loading experience than Tailwindcss.

Windi CSS is a CSS framework that provides functional classes. The most intuitive feature is that your CSS does not need to leave HTML to make styles effective. That is, in a Vue file, you will no longer need to write style tags to load your CSS. Or “custom prefix + attribute mode” to control the effect of CSS styles. These class utility classes or attribute modes are ready-made in Windi CSS, or configured through the Windi CSS configuration file.

Examples of CSS functionality classes using Windi:

The class tools

<div class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-2 sm:(py-4 flex items-center space-y-0 space-x-6)">
  <img class="block mx-auto h-24 rounded-full sm:(mx-0 flex-shrink-0)" src="/img/erin-lindford.jpg" alt="Woman's Face" />
  <div class="text-center space-y-2 sm:text-left">
    <div class="Space - y - 0.5">
      <p class="text-lg text-black font-semibold">Erin Lindford</p>
      <p class="text-gray-500 font-medium">The product manager</p>
    </div>
    <button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:(text-white bg-purple-600 border-transparent) focus:(outline-none ring-2 ring-purple-600 ring-offset-2)">The message</button>
  </div>
</div>
Copy the code

Custom prefix + attribute schema

<button 
  w:bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  w:text="sm white"
  w:font="mono light"
  w:p="y-2 x-4"
  w:border="2 rounded blue-200"
>
  Button
</button>
Copy the code

Prefixes such as w: are customizable. This is not required, but it is best to add them to prevent naming conflicts. Custom prefixes need to be set manually in the configuration file, which will be written later.

Windi using CSS

Maybe you’ll get a clearer picture of Windi CSS by getting your hands on it and then using it in your project. So next, I’ll write about how to introduce Windi CSS into your project and use it to implement some demos.

The use of plug-in

Windi CSS has many class names, so it is necessary to install plug-ins to work with them. VsCode + WindiCSS IntelliSense is recommended.

Vue3 + Vite

This command can be used to quickly build a Vue3 project.

npm init vite@latest my-vue-app --template vue
Copy the code

Install the Windi CSS

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

configuration

vite.config.js

// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import WindiCSS from "vite-plugin-windicss";  / / < = =

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), WindiCSS()], / / < = =
});
Copy the code

Create a Windi CSS configuration file

This file is not available and needs to be added manually, at the same level as viet.config.js.

The file name can be one of the following, and they can all be recognized.

• windi.config.js
• tailwind.config.js

TypeScript projects are:

• tailwind.config.ts
• windi.config.ts

If your project is in Monorepo code management mode, just create the Windi CSS configuration file in the root directory of the application to take effect.

import { defineConfig } from "windicss/helpers";

export default defineConfig({
  /* Configuration item... * /
});
Copy the code

Configuration items

safelist

No utility classes can be detected in this case

<! -- Will not be detected -->
<div className={`p-The ${size} `} >
Copy the code

Therefore, you need to set a whitelist

safelist: "p-1 p-2 p-3 p-4".Copy the code

A safelist can also be an array

function range(size, startAt = 1) {
  return Array.from(Array(size).keys()).map(i= > i + startAt)
}
safelist: [
    range(3).map(i= > `p-${i}`), / to the p/p - 1-3
    range(10).map(i= > `mt-${i}`), / / mt - 1 to mt - 10
]
Copy the code

attributify

Set to true to enable the properties mode

attributify: true
Copy the code

And then you can write styles like this

  <button
    w:w="100px"
    w:h="40px"
    w:bg="blue-700"
    w:m="10px"
    w:text="color-[#fff]"
  >
    btn
  </button>
Copy the code

However, to prevent naming conflicts, it is recommended to define a prefix

attributify: {
    prefix: "w:",},Copy the code

main.js

import { createApp } from "vue";
import App from "./App.vue";
import "virtual:windi.css"; / / < = =

createApp(App).mount("#app");
Copy the code

Virtual: Windi. CSS is equivalent to importing the three layers in sequence

import 'virtual:windi-base.css'
import 'virtual:windi-components.css'
import 'virtual:windi-utilities.css'
Copy the code

There’s a lot of flexibility here, and it’s ok to introduce your own CSS in between. But it will be covered by the ones behind it.

  import 'virtual:windi-base.css'
  import 'virtual:windi-components.css'
+ import './my-style.css' / / < = =
  import 'virtual:windi-utilities.css'
Copy the code

Something interesting

Introduction of pictures

The property used to import the background image is background-image, but this needs to be customized to use.

// windi.config.js
export default defineConfig {
  theme: {
    extend: {
      backgroundImage: theme= > ({
        'app-bg': 'url('@app/src/assets/img/bg.svg') ',}),},},}Copy the code

Here is an example of using the app-bg utility class

<div w:bg="app-bg" w:w="full" w:h="full" w:pos="relative"></div>
Copy the code

This results in a full-screen image (but only if the HTML, body, and #app heights are 100%).

Important prefix

<div class="text-28px ! text-purple-600 text-blue-600 p-110px">
    important class
</div>
Copy the code

Responsive processing

The breakpoint is judged by the breakpoint. The mobile end has the default breakpoint, and you can also customize the breakpoint.

// Custom breakpoints
export default defineConfig({
    theme: {
    screens: {
      phone: '320px'.iPad: '1024px'.sm: '1280px'.md: '1366px'.lg: '1440px'.xl: '1920px',}}})Copy the code

Demo

<div class="phone:bg-red-400 phone:text-light-100 phone:p-10 iPad:p-50 iPad:bg-blue-700 lg:p-100 lg:bg-cyan-800 lg:text-50px">responsive</div>
Copy the code

You can write classes as groups

<div class="phone:(bg-red-400 text-light-100 p-10) iPad:(p-50 bg-blue-700) lg:(p-100 bg-cyan-800 text-50px)">responsive</div>
Copy the code

You can also write it as an attribute mode, so you don’t make the class too long

 <div
    w:phone="bg-red-400 text-light-100 p-10"
    w:iPad="bg-blue-700 p-50"
    w:lg="p-100 bg-cyan-800 text-50px"
>responsive</div>
Copy the code

phone

iPad

lg

In addition, you can have

lg  => greater or equal than this breakpoint
<lg => smaller than this breakpoint
@lg => exactly this breakpoint range
Copy the code

• lg:p-1
• <lg:p-2
• @lg:p-3

 <div
    w:phone="bg-red-400 text-light-100 p-10"
    w:iPad="bg-blue-700 p-50"
    w:lg="p-100 bg-cyan-800 text-50px"
    class="<phone:bg-black text-light-100"
>responsive</div>
Copy the code

instruction

Directives can be used in conjunction with CSS.

@apply

<div class="btn btn-blue">button</div>

<style scoped>
.btn {
  @apply font-bold py-2 px-4 rounded w-100px m-10px;
}
.btn-blue {
  @apply bg-blue-500 hover:bg-blue-700 text-white;
  padding-top: 1rem;
}
</style>
Copy the code

@variants

Can be used to generate utility classes with screen modifiers, state modifiers, and topic modifiers

<div class="btn-blue btn">button</div>

<style>
.btn {
  @apply font-bold py-2 px-4 rounded w-100px m-10px;
}
.btn-blue {
  @apply bg-blue-500 hover:bg-blue-700 text-white;
  padding-top: 1rem;
}

@variants focus, hover {   / * * (= = * /
  .btn {
    @apply w-200px h-200px; }}@variants dark {
    
}
</style>
Copy the code

@screen

Breakpoints are referenced by name

@screen sm {
  .custom {
    @applytext-lg; }}Copy the code

theme()

The theme() function allows you to get the value you set via the. Operator

<span class="color-blue">color blue</span>

<style>
.color-blue {
  color: theme("colors.blue.400");
}
</style>
Copy the code

Windi CSS provides a wide range of utility classes and allows us to customize styles as needed, which is easy to use. We don’t need to write CSS styles by hand or spend time thinking about class naming or module differentiation, but the writing style and habits are quite different from those of less or stylus. If you’re not familiar with a utility class at first, you’ll have to dig through the documentation. There is also the need to have some conventions, for example, if there are too many classes, should you consider changing to write attribute mode, or if there are some that can be written together, it is better to write together, so that the tool class will not be too messy.

Pay attention to our

Everyone’s support is our motivation to continue to move forward, come to pay attention to our deep trust in the front end team ~

In the meantime, if you are interested, please join us and send your resume to [email protected].