Using unocss in vue and its basic usage

What is unocss?

unocss is a real-time atomic CSS engine that allows you to control the styling of elements with short class names without writing complex CSS code.

Advantages of unocss

It lets you develop and prototype quickly without having to think about the details of CSS.
It can make your CSS files smaller because it only generates the utility classes you use.
It makes your CSS more consistent because it follows a preset set of rules and variables.
It makes your CSS more flexible as it supports custom tool classes, variants, directives and icons.
It makes your CSS easier to maintain because it avoids style conflicts and duplication of code.

Install unocss

pnpm add -D unocss
// or
yarn add -D unocss
// or
npm install -D unocss

Configure the plug-in in the packaging tool configuration file

vite configuration

// vite.config.ts
import UnoCSS from 'unocss/vite'
import {
    
     defineConfig } from 'vite'

export default defineConfig({
    
    
  plugins: [
    UnoCSS(),
  ],
})

Configure in webpack5

npm install @unocss/webpack

// webpack.config.js
const UnoCSS = require('@unocss/webpack').default

module.exports = {
    
    
  plugins: [
    UnoCSS(),
  ],
  optimization: {
    
    
    realContentHash: true,
  },
}

Configure in webopack4

npm install @unocss/webpack

// webpack.config.js
const UnoCSS = require('@unocss/webpack').default

module.exports = {
    
    
  plugins: [
    UnoCSS(),
  ],
  css: {
    
    
    extract: {
    
    
      filename: '[name].[hash:9].css',
    },
  },
}

Used in vue scaffolding (webpack5)

//vue.config
const {
    
     defineConfig } = require("@vue/cli-service");
const UnoCSS = require("@unocss/webpack").default;
module.exports = defineConfig({
    
    
  transpileDependencies: true,
  configureWebpack: {
    
    
    plugins: [UnoCSS()],
    optimization: {
    
    
      realContentHash: true,
    },
  },
});

Create an `uno.config.ts configuration file

// uno.config.ts
import {
    
     defineConfig, presetAttributify, presetUno } from 'unocss'

export default defineConfig({
    
    
    presets: [
        presetAttributify({
    
     /* preset options */ }),
        presetUno(),
    ],
})

Used in main.ts

// main.ts
// vite如下配置
import 'virtual:uno.css'
// webpack如下配置
import 'uno.css'

Install vscode plug-in unocss

as the picture shows

Insert image description here

Configure in settings.json. The function here is to provide smart prompts when writing css.

 "editor.quickSuggestions": {
    
    
    "strings": true,
    "other": true,
    "comments": true,
  },

After configuration, as shown below

Insert image description here

Query interactive documents

What should I do if I’m new to this? I’m just a hen. Then check out the interactive documentation of unocss.

Enter the attribute in it to get the class name. as the picture shows

Insert image description here

Basic usage (the following are some common examples, but they do not mean these are the only ones)

unocss supports preset units, and you can also customize units, for example

.px-1 {
    
    
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-10rpx {
    
    
  padding-left: 10rpx;
  padding-right: 10rpx;
}

Padding related usage

.p-t-1 {
    
    
  padding-top: 0.25rem;
}
.p-b-1 {
    
    
  padding-bottom: 0.25rem;
}
.p-l-1 {
    
    
  padding-left: 0.25rem;
}
.p-r-1 {
    
    
  padding-right: 0.25rem;
}
.p-1 {
    
    
  padding: 10px;
}
.px-1 {
    
    
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.py-1 {
    
    
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

magin related usage

The usage of margin and padding are exactly the same
. For example:

.mx-1 {
    
    
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.my-1 {
    
    
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

Flex related usage

The usage is similar. Here are some common examples:

.flex {
    
    
  display: flex;
}
.flex-1 {
    
    
  flex: 1 1 0%;
}
.items-center {
    
    
  align-items: center;
}
.justify-center {
    
    
  justify-content: center;
}

Text related usage

.color-#999 {
    
    
  --un-text-opacity: 1;
  color: rgba(153, 153, 153, var(--un-text-opacity));
}
.text-12px {
    
    
  font-size: 12px;
}
.break-all {
    
    
  word-break: break-all;
}

Configuration usage

Static rule configuration

export default defineConfig({
    
    
 rules: [
   ['m-1', {
    
     margin: '0.3rem' }]
 ]
})

After the above configuration, m-1 is detected in css and it will be compiled into

.m-1 {
    
     margin: 0.3rem; }

dynamic rules

export default defineConfig({
    
    
  rules: [
    /** match[1]代表获取到的值 */
    [/^m-(\d+)$/, match => ({
    
     margin: `${
      
      +match[1] * 10}px` })],
    [/^p-(\d+)$/, match => ({
    
     padding: `${
      
      +match[1] * 10}px` })],
  ]
})

In this way, the preset size of unocss can be modified. For example, m-1 will be compiled into

 .m-1 {
    
     margin: 10px; }

A shortcut

In vscode, we all use shortcut keys to generate code with one click, and unocss is no exception. If you have a box and the content inside needs to be vertically centered, then it can be defined as

export default defineConfig({
    
    
  shortcuts: [
   'flex-center': 'flex items-center justify-center',
  ]
})

Dynamic shortcuts

export default defineConfig({
    
    
 shortcuts: [
    [/^base-border-(.*)$/, match => `border-1 border-style-dashed border-${
      
      match[1]}`],
  ]
})

Compilation result

.base-border-red {
    
    
  border-width: 1px;
  --un-border-opacity: 1;
  border-color: rgba(248, 113, 113, var(--un-border-opacity));
  border-style: dashed;
}

Summarize

You may be a little uncomfortable when you first get started with unocss. After writing too much, and the unocss plug-in has smart grammar prompts, our work efficiency can be greatly improved. The next step is the issue of unocss proficiency. Come on, strangers reading this.