官网

因为项目是在 vue+vite 项目使用，所以选择 Windi CSS 是按需供应的 TailWind 替代方案，

# 优点

⚡️ 极速 - 在 Vite 中比 Tailwind 快 20~100 倍 🧩 按需使用 CSS 工具类（与 Tailwind CSS v2 完全兼容） 📦 按需使用原生元素样式重置（预检样式） 🔥 模块热替换 (HMR) 🍃 从 tailwind.config.js 加载配置 🤝 与框架无关 - Vue、 React、Svelte and vanilla！ 📄 CSS @apply / @screen 指令转换（也适用于 Vue SFC 的<style> ） 🎳 支持变量组 - 如 bg-gray-200 hover:(bg-gray-100 text-red-300) 😎 "Devtools 设计" - 支持传统的 Tailwind 运行方式

# 使用

# 安装包

npm i -D vite-plugin-windicss windicss

# vite 配置修改

import WindiCSS from 'vite-plugin-windicss'

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

# main.ts 入口文件引入

import 'virtual:windi.css'

# windi css 配置文件

同时兼容 windi.config.js 或 tailwind.config.js

import { defineConfig } from 'windicss/helpers'
import formsPlugin from 'windicss/plugin/forms'

export default defineConfig({
  preflight: false,
  darkMode: 'class',
  safelist: 'p-3 p-4 p-5',
  theme: {
    extend: {
      colors: {
        teal: {
          100: '#096',
        },
      },
    },
  },
  attributify: {
    prefix: 'w:',
  },
  alias: {
    hstack: 'flex items-center',
    vstack: 'flex flex-col',
    icon: 'w-6 h-6 fill-current',
    app: 'text-red',
    'app-border': 'border-gray-200 dark:border-dark-300',
  },
  plugins: [formsPlugin],
})

# 属性配置解释

# preflight 预检样式

Windi CSS 中的预检样式实际上是指一组默认的全局样式，用于在没有明确样式声明的情况下提供一些基本的全局样式设置，以确保一致性和一致的样式基础。这包括了重置默认的边距、填充、字体等，以及一些其他的全局样式设置。默认为 true

# attributify：开启属性模式

先看下传统 tailwind 使用的语法，即所有实用程序和变体都写在类中

<button
  class="bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200 dark:bg-blue-500 dark:hover:bg-blue-600"
>
  Button
</button>

如果使用 Windi css 的属性模式，则可以将类拆分为多个属性，如下：

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

如果担心命名冲突，可以通过以下方式给属性模式添加自定义前缀：

export default {
  attributify: {
    prefix: 'w:',
  },
}

<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>

# alias 别名配置

请注意，在使用别名时需要加上前缀 * ，例如：

<div class="*hstack"></div>

# theme 配置

theme 是 tailwind css 的配置，可以为项目自定义默认主题。theme

# dark mode 深色模式

dark-mode

# plugins

plugins

# Tailwind css

根据官方文档

# 安装

npm install -D tailwindcss

# 配置

# 安装完成后
npx tailwindcss init

执行完成后，在项目根目录下会生成一个tailwind.config.js文件，里面有配置项，可以根据自己的需求进行修改。

# 基本使用

w-full
w-xxpx
p-xxpx
pt-xxpx
bg-white
text-16px
text-[#000]

# 响应式

tailwind css 响应式提供了 5 个断点：

使用起来很方便。

比如以下布局，在 pc 上需要左右展示:

在移动端需要上下展示:

使用 tailwindcss 可以这样设置：

<div class="flex justify-center flex-col sm:flex-row"></div>

意思是在屏幕宽度小于 640px 时，使用 flex-col，大于 640px 时将 flex-col 改为 flex-row，所以在设置响应式布局时，需要先设置默认布局，然后再根据不同屏幕宽度设置不同的布局。

京ICP备2022027737号
Copyright © 2022 - present @wangxiang