CSS Summoner

CSS Summonerのスタイルを使う

CSS Summonerで生成したカスタムクラスを使用するために必要なもの
  • CSS SummonerのCSSファイルのダウンロード
  • Tailwind CSS(v3)のインストール
※Tailwind CSS v4への対応は検討中です。使えるかわかりません

CSSファイルのダウンロード

以下のリンクからCSSバンドルファイルをダウンロードできます：

Download CSS File (css-summoner-bundle.min.css)

HTMLでの使用方法

1. ダウンロードしたCSSファイルをプロジェクトに配置します。

2. HTML内で以下のようにリンクします：

<!-- HTMLファイルのheadタグ内に記述 -->
<link rel="stylesheet" href="パス/css-summoner-bundle.min.css">

モジュールでの使用方法

フレームワークやビルドシステムを使用している場合は、以下のようにインポートできます： 

import 'パス/css-summoner-bundle.min.css';

CSSファイルに含まれるもの

このファイルには以下が含まれています：

  • CSS変数定義
  • コンポーネントスタイル
  • ユーティリティクラス

Tailwind CSSの設定

CSS Summonerのスタイルは、Tailwind CSS（v3）で構築されています。使用するには以下が必要です：

前提条件

  • Tailwind CSS v3がプロジェクトに導入されていること
  • Tailwindのベーススタイル、コンポーネント、ユーティリティが正しく読み込まれていること

使用方法

CSS SummonerのバンドルファイルはTailwindの基本スタイル読み込みの後にインポートしてください。

CSSファイルの場合：

/* 既存のTailwindインポート */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* CSS Summonerをその後にインポート */
@import 'パス/css-summoner-bundle.min.css';

参考：https://v3.tailwindcss.com/docs/using-with-preprocessors#build-time-imports

※ Tailwind CSS v4への対応は現在検討中です。互換性については検証が必要です。

備考

CSS Summonerのスタイルは@layer構文を使用してTailwindのレイヤーシステムと統合されています。 これにより、Tailwindの優先順位システムを維持しながら、独自のカスタムスタイルを追加できます。

← back to css-summoner