vue3 + vite + windicss 基础使用 迁移 unocss

windicss

vscode 提示插件 WindiCSS IntelliSense

下载

npm i -D vite-plugin-windicss windicss

配置

vite.config.ts

import WindiCSS from "vite-plugin-windicss";

export default {
  plugins: [WindiCSS()],
};

main.ts

import "virtual:windi.css";

使用

<div class="h-screen w-screen">测试数据div>

自动值推导

默认单位都是 rem 某些时候你需要用到具体 px 来适应设计图

<!-- sizes and positions leading 行高-->
<div class="p-5px mt-[0.3px] leading-20px"></div>

<!-- colors -->
text-[rgba(123,123,123,0.5)]  逗号前后不能有空格否则不生效
<button class="bg-hex-b2a8bb bg-[#f6f6f7]"></button>
<button class="text-[rgba(123,123,123,0.5)]"></button>
<button class="bg-[hsl(211.7,81.9%,69.6%)]"></button>

<!-- border-->
border          border-width: 1px;
rounded-5px     border-radius: 5px  
rounded-tr-4px  border-top-right-radius: 4px; 
<div class="border rounded-5px rounded-tr-4px"></div>

<!-- grid template -->
<div class="grid-cols-[auto,1fr,30px]"></div>

变量的使用

.van-tabbar{
	height: var(--van-tabbar-height)
}

<main class="pb-$van-tabbar-height"></main>

Important 前缀

在类名前加上 ! 即为当前下属性加上 important

<div class="!common-box">testdiv>

在 @apply 指令中使用

.btn { @apply font-bold py-2 px-4 rounded !important; }

Shortcuts

快速创建可复用的组件和工具类。
windi.config.ts

import { defineConfig } from "vite-plugin-windicss";

export default defineConfig({
  shortcuts: {
    "common-box": "w-[375px] bg-hex-b2a8bc",
  },
});

全局使用

<div class="common-box">div>

指令

@apply

和 Shortcuts 很像，Shortcuts 全局可用，@apply 当前文件可用（把一堆臃肿的类名重新取名放在视图上）

<div class="screen">测试数据</div>

<style lang="postcss" scoped>
.screen {
  @apply h-screen w-screen;
}
</style>

theme()

theme() 函数允许你通过 . 运算符来获取你设置的值。

windi.config.ts

import { defineConfig } from "vite-plugin-windicss";
export default defineConfig({
  theme: {
    extend: {
      colors: {
        "main-color": "#fc0",
      },
    },
  },
});

style 写法

<style lang="postcss" scoped>
  .box {
    background: theme("colors.main-color");
  }
style>

class 写法

<div class="text-cyan-300 bg-main-color">testdiv>

属性化模式

基于这个特性，你可以在 html 属性中编写 windi 类。
windi.config.ts

import { defineConfig } from "windicss/helpers";

export default defineConfig({
  // attributify 开启属性模式
  // attributify: true,
  attributify: {
    // 属性别名
    prefix: "w:",
  },
  alias: {},
});

开启属性模式 默认写法

<div text="sm white">测试数据div>

开启属性模式 配置别名

<div w:text="sm white">测试数据div>

迁移 unocss

下载

pnpm add -D unocss

vite.config.ts

import UnoCSS from "unocss/vite";
import { defineConfig } from "vite";

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

uno.config.ts

import { defineConfig } from "unocss";

export default defineConfig({});

main.ts

import "virtual:uno.css";

浏览器样式重置

下载

pnpm add @unocss/reset

使用
main.ts

import "@unocss/reset/normalize.css";

@apply ， @screen and theme()

下载

pnpm add -D @unocss/transformer-directives

// uno.config.ts

import { defineConfig } from "unocss";
import transformerDirectives from "@unocss/transformer-directives";

export default defineConfig({
	// ...
	transformers: [transformerDirectives()],
});

@apply

.custom-div {
	@apply text-center my-0 font-medium;
}

theme()

.btn-blue {
	background-color: theme("colors.blue.500");
}

UnoCSS 的 Tailwind / Windi CSS 紧凑预设。

下载

pnpm add -D @unocss/preset-wind

配置 uno.config.ts

import { defineConfig } from "unocss";
import presetWind from "@unocss/preset-wind";

export default defineConfig({
	presets: [presetWind()],
});

此预设包含在 unocss 包中，您也可以这样导入它：
import { presetWind } from ‘unocss’

使用 ::after 伪元素

<div class="after:content-[''] after:-translate-x-50% after:absolute after:left-50% after:bottom-0"></div>