---
title: "Windi CSS：次世代 Tailwind CSS コンパイラ"
description: "Windi CSS は Tailwind CSS 2.0 完全互換の動的生成コンパイラです。"
canonical_url: "https://hannoeru.me/posts/windi-css-next-generation-tailwind-css-compiler"
---

> Index of every page on this site: [llms.txt](https://hannoeru.me/llms.txt)

> ⚠️ **注意（2026）：** Windi CSS は 2023 年にアーカイブされ、メンテナンスされていません。新規プロジェクトには <span>
> 
> Tailwind CSS
> 
> </span>
> 
> （v3/v4）または [UnoCSS](https://unocss.dev/) を使用してください。本記事は履歴として残しています。

[**Windi CSS**](https://github.com/windicss/windicss) は <span>

Tailwind CSS

</span>

 2.0完全互換の動的生成コンパイラです。

Tailwind CSS を使った場合、初期ビルド時間が非常に長くなってしまう場合がありますが、<span>

Windi CSS

</span>

 を使うことでビルド時間を短縮し、リロード時も高速に表示することができます。

## 機能について

- 実行速度
- 変数とバリアントの自動推定
- 構成ファイルの互換性
- ブラウザ互換性

### ⚡️ 速度

CSS 内のユーティリティとディレクティブを検出し、動的で処理します。これにより、コンパイル速度が大幅に向上されます。 <span>

Windi CSS

</span>

 は、使用する CSS のみをロードするので、パージする必要がありません。

<tweet id="1361398324587163648">



</tweet>

### 😎 変数とバリアントの自動推定

数値、サイズ、スコア、色などのカスタム変数を設定する必要はありません。 <span>

Windi CSS

</span>

 は、クラスのセマンティクスに基づいてそれらを自動的に生成します。

たとえば、 `p-3.2`を使用すると、それが利用可能になり、そのまま機能します。

### ⚙️ 構成ファイルの互換性

<span>

Windi CSS

</span>

 は <span>

Tailwind CSS

</span>

 の構成ファイルを使用できます。

### ✅ ブラウザの互換性

すべてのユーティリティ用に生成されたCSSはすでにブラウザ互換であるため、必要がない限り <span>

autoprefixer

</span>

 を使用する必要がありません。

## Windi CSS に追加されている機能について

- ユーティリティグループ
- スクリーンユーティリティ
- より高機能なライト/ダークテーマのサポート
- 変数とバリアントの自動推定

### 🎳 ユーティリティグループ

括弧でグループ化することで、同じバリアントに複数のユーティリティを適用することができます。

```html
<div class="bg-white font-light sm:hover:(bg-gray-100 font-medium)"/>
```

### 🖥 スクリーンユーティリティ

`+` や `-` の画面ユーティリティを使うことができます、カスタマの画面サイズにも適用します。

```css
sm: @media (min-width:640px);
+sm: @media (min-width:640px) and (max-width:768px);
-sm: @media (max-width:640px);
```

### 🌓 より高機能なライト/ダークテーマのサポート

<span>

Windi CSS

</span>

 はすべての CSS [疑似要素と疑似クラス](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) に対応しています。

また、`prefers-color-scheme` に基づいて `@dark`、 `@light` のクラスも追加しました。

### 🤖 変数とバリアントの自動推定

<span>

Windi CSS

</span>

 は使用されたCSSユーティリティのみを生成するため、数値やサイズ、スコア、色などのカスタム変数を設定する必要がなくなりました。

<span>

Windi CSS

</span>

 は自動的にユーティリティを検出し、適切なアルゴリズムに基づいてクラスを生成します。

また、変数名を渡すこともできるので、CSS変数（CSSカスタムプロパティ）との組み合わせは非常に便利です。

#### 数字

```css
p-${float[0,...infinite]} -> padding: ${float/4}rem

p-2.5 -> padding: 0.625rem;
p-3.2 -> padding: 0.8rem;
```

#### サイズ

```css
// ${size} must end up with rem|em|px|vh|vw|ch|ex
p-${size} -> padding: ${size}

p-3px -> padding: 3px;
p-4rem -> padding: 4rem;
```

#### 分数

```css
w-${fraction} -> width: ${fraction -> percent}

w-9/12 -> width: 75%;
```

#### カラー

```css
bg-${color} -> background-color: rgba(...)

bg-gray-300 -> background-color: rgba(209, 213, 219, var(--tw-bg-opacity));

bg-hex-${hex} -> background-color: rgba(...)

bg-hex-1c1c1e -> background-color: rgba(28, 28, 30, var(--tw-bg-opacity));
```

#### CSS変数（CSSカスタムプロパティ）

```css
bg-$${variableName}

.bg-$test-variable {
  --tw-bg-opacity: 1;
  background-color: rgba(var(--test-variable), var(--tw-bg-opacity));
}
```

## 🔰 始め方

最近流行りのフロントエンドツール <span>

Vitejs

</span>

 を使って <span>

Windi CSS

</span>

 の環境構築と実際に動かすところまでをやっていきます。

### Vite のインストール

Viteテンプレートの生成

> 現在の構文は `npm create vite@latest` です（`npm init @vitejs/app` は廃止されました）。

```bash
npm create vite@latest
```

テンプレートの中で自分が好きのを選んでプロジェクトフォルダに移動

```bash
cd [project name]
```

依存項目のインストール

```bash
npm install
```

Devサーバーを起動

```bash
npm run dev
```

### Windi CSS プラグインのインストール

vite-plugin-windicss のインストール

```bash
npm i vite-plugin-windicss -D # yarn add vite-plugin-windicss -D
```

プロジェクトのルートディレクトリの`vite.config.ts`を編集

```ts [vite.config.ts]
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import WindiCSS from 'vite-plugin-windicss' // 追加

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    WindiCSS(), // 追加
  ],
})
```

### 動作確認

`src/main.ts` ファイルに <span>

Windi CSS

</span>

 をインポート

```ts [src/main.ts]
import 'virtual:windi.css'
```

設定は簡単なので、短時間ですぐ使えます、<br />


ぜひ Vite と Windi CSS の速さを体験してください。

[ソースコード](https://github.com/hannoeru/vite-windi-starter)<br />

[Tailwind CSS からの移行ガイド](https://windicss.org/guide/migration.html)

翻訳元：<span>

WindiCSS Docs

</span>



## 参考・リンク

- <span>

Windi CSS

</span>
- <span>

WindiCSS Docs

</span>
- <span>

vite-plugin-windicss

</span>
- <span>

vite-windi-starter

</span>
- <span>

Vitejs

</span>

## Sitemap

See the full [sitemap](https://hannoeru.me/sitemap.md) for all pages.