Windi CSS 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
Windi CSS 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
Windi CSS 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT
操作系统 跨平台
软件类型 开源软件
所属分类 Web应用开发CSS框架
开源组织
地区 不详
投 递 者 Alias_Travis
适用人群 未知
收录时间 2021-12-21

软件简介

Windi CSS 是下一代工具优先的 CSS 框架。如果你已经熟悉了 Tailwind CSS,可以把 Windi CSS 看作是按需供应的 Tailwind 替代方案,它为你提供了更快的加载体验,完美兼容 Tailwind v2.0,并且拥有很多额外的酷炫功能。

为什么选择 Windi CSS?

通过扫描 HTML 和 CSS 按需生成工具类(utilities),Windi CSS 致力于在开发中提供 更快的加载体验 以及更快的 HMR,并且在生产环境下无需对 CSS 进行 Purge(一种在生产环境中对未使用的 CSS 进行清除而节省体积的技术)。

基础用法

Windi CSS 支持 Tailwind CSS 的所有工具类,无需任何额外配置。

你可以像平常一样正常编写你的组件,同时在样式表中使用实用类:

<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">产品经理</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)">
      消息
    </button>
  </div>
</div>

只有你使用的工具类才会产生相应的 CSS。

集成

我们为主流工具提供了最佳的适配,在每一个工具上都有最好的开发体验。请参阅 集成指南,选择你最喜欢的工具即刻体验!

配置 Windi CSS

Windi CSS 中的配置与你在 Tailwind CSS 中所期望的相似,但有额外的增强和特性。

如果你要从 Tailwind 迁移,请先查看 迁移指南

配置文件

默认情况下,Windi CSS 会在你的项目根目录下搜索配置文件。以下是有效的名称:

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

得益于 sucrase支持原生 ES 模块和开箱即用的 TypeScript

为了获得配置的类型检查,你可以从 windicss/helpers 导入 defineConfig 函数:

windi.config.ts
import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  /* 配置项... */
})
windi.config.js
// @ts-check - enable TS check for js file
import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  /* 配置项... */
})

defineConfig 是带有类型提示的帮助函数,这意味着如果你不需要自动补全/类型检查,你也可以忽略此处。

windi.config.js
export default {
  /* 配置项... */
}

你可以使用编辑器的自动补全功能,来查看可用的配置字段。对功能配置的描述将在对应页面中进行展示。

配置示例

windi.config.js
import { defineConfig } from 'windicss/helpers'
import colors from 'windicss/colors'
import plugin from 'windicss/plugin'

export default defineConfig({
  darkMode: 'class', // or 'media'
  theme: {
    extend: {
      screens: {
        'sm': '640px',
        'md': '768px',
        'lg': '1024px',
        'xl': '1280px',
        '2xl': '1536px',
      },
      colors: {
        gray: colors.coolGray,
        blue: colors.lightBlue,
        red: colors.rose,
        pink: colors.fuchsia,
      },
      fontFamily: {
        sans: ['Graphik', 'sans-serif'],
        serif: ['Merriweather', 'serif'],
      },
      spacing: {
        128: '32rem',
        144: '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      },
    },
  },
  plugins: [
    plugin(({ addUtilities }) => {
      const newUtilities = {
        '.skew-10deg': {
          transform: 'skewY(-10deg)',
        },
        '.skew-15deg': {
          transform: 'skewY(-15deg)',
        },
      }
      addUtilities(newUtilities)
    }),
    plugin(({ addComponents }) => {
      const buttons = {
        '.btn': {
          padding: '.5rem 1rem',
          borderRadius: '.25rem',
          fontWeight: '600',
        },
        '.btn-blue': {
          'backgroundColor': '#3490dc',
          'color': '#fff',
          '&:hover': {
            backgroundColor: '#2779bd',
          },
        },
        '.btn-red': {
          'backgroundColor': '#e3342f',
          'color': '#fff',
          '&:hover': {
            backgroundColor: '#cc1f1a',
          },
        },
      }
      addComponents(buttons)
    }),
    plugin(({ addDynamic, variants }) => {
      addDynamic('skew', ({ Utility, Style }) => {
        return Utility.handler
          .handleStatic(Style('skew'))
          .handleNumber(0, 360, 'int', number => `skewY(-${number}deg)`)
          .createProperty('transform')
      }, variants('skew'))
    }),
    require('windicss/plugin/filters'),
    require('windicss/plugin/forms'),
    require('windicss/plugin/aspect-ratio'),
    require('windicss/plugin/line-clamp'),
    require('windicss/plugin/typography')({
      modifiers: ['DEFAULT', 'sm', 'lg', 'red'],
    }),
  ],
})
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论

点击加入讨论🔥(4) 发布并加入讨论🔥
发表了资讯
2021/12/21 15:42

淘系前端架构周刊:WindiCSS v3.4.0 发布

News WindiCSS v3.4.0 发布 上周五 WindiCSS 带来了全新的 v3.4.0 版本,对齐了 Tailwind v3 中的许多实用工具。 Release:Release v3.4.0 · windicss/windicss Open Source unbuild 一个统一的 JavaScript 构建系统,具有以下特性: 经过优化的 bundler:基于 Rollup 的 bundler,支持 TypeScript 并支持生成 commonjs 和 ES modules 两种格式 + 类型声明 bundleless:集成 mkdist,用于单文件转译生成 bundleless 产物 通用类...

0
3
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
暂无内容
4 评论
10 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部