Windi CSS 使用教程

Windi CSS 使用教程

windicssNext generation utility-first CSS framework.项目地址:https://gitcode.com/gh_mirrors/wi/windicss

项目介绍

Windi CSS 是一个下一代实用优先的 CSS 框架。它的设计灵感来源于 Tailwind CSS，但旨在提供更快的开发体验和更灵活的配置选项。Windi CSS 通过按需生成实用类，避免了不必要的 CSS 生成，从而减少了最终构建的大小和加载时间。

项目快速启动

安装

首先，你需要在你的项目中安装 Windi CSS。你可以通过 npm 或 yarn 来安装：

npm install windicss
# 或者
yarn add windicss

配置

在你的项目中创建一个 windi.config.js 文件来进行配置：

export default {
  preflight: true,
  attributify: true,
  shortcuts: {
    'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md',
  },
  theme: {
    extend: {
      colors: {
        primary: '#3490dc',
      },
    },
  },
}

集成到项目

如果你使用的是 Vite，可以在 vite.config.js 中进行配置：

import { defineConfig } from 'vite'
import WindiCSS from 'vite-plugin-windicss'

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

使用

在你的 HTML 或 JSX 文件中，可以直接使用 Windi CSS 的实用类：

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-gray-500">You have a new message!</p>
  </div>
</div>

应用案例和最佳实践

响应式设计

Windi CSS 提供了强大的响应式设计工具，可以通过前缀来定义不同屏幕尺寸下的样式：

<div class="p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12">
  <!-- 内容 -->
</div>

自定义实用类

你可以通过配置文件中的 shortcuts 选项来定义自己的实用类：

export default {
  shortcuts: {
    'btn-primary': 'py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75',
  },
}

然后在你的代码中使用：

<button class="btn-primary">Click me</button>

典型生态项目

Vite Plugin

vite-plugin-windicss 是一个官方的 Vite 插件，用于在 Vite 项目中集成 Windi CSS：

npm install vite-plugin-windicss

SvelteKit

对于 SvelteKit 项目，可以使用 svelte-windicss-preprocess 来集成 Windi CSS：

npm install svelte-windicss-preprocess

然后在 svelte.config.js 中进行配置：

import windi from 'svelte-windicss-preprocess'

export default {
  preprocess: [
    windi({
      configPath: 'windi.config.js',
    }),
  ],
}

通过这些配置和使用方法，你可以快速地在你的项目中集成和使用 Windi CSS，提升开发效率和用户体验。

windicssNext generation utility-first CSS framework.项目地址:https://gitcode.com/gh_mirrors/wi/windicss