Halflight CSS

概要

Tailwind CSS v4 向けのレトロピクセル風 npmパッケージ

---

使用方法

このパッケージはTailwind前提

npm install tailwindcss @tailwindcss/forms

このパッケージのインストール

npm install halflightcss

vite のコンフィグ設定（Tailwind標準のみ）

// vite.config.ts

import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite";

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

css には Tailwindcss と同じようにインポート

// style.css

@import "tailwindcss";
@import "halflightcss";

使用しているGoogleフォントを読み込んでください

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=DotGothic16&display=swap" rel="stylesheet" />

---

コンポーネント

基本的なのがあります。詳しくは Github をご確認ください