SolidJS で Tailwind CSS をインストール

SolidJS プロジェクトに Tailwind CSS をセットアップします。

プロジェクトを作成する

まだセットアップしていない場合は、新しい SolidJS プロジェクトを作成することから始めます。最も一般的なアプローチは、以下を使用することです。 SolidJS Vite テンプレート.

ターミナル

npx degit solidjs/templates/js my-project
cd my-project

Tailwind CSS をインストール

@tailwindcss/vite とそのピア依存関係を npm 経由でインストールします。

ターミナル

npm install tailwindcss @tailwindcss/vite

Vite プラグインを設定

@tailwindcss/vite プラグインを Vite 設定に追加します。

vite.config.ts

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
  plugins: [
    tailwindcss(),
    solidPlugin(),
  ],
  server: {
    port: 3000,
  },
  build: {
    target: 'esnext',
  },
});

Tailwind CSS をインポート

Tailwind CSS をインポートする @import を ./src/index.css に追加します。

index.css

@import "tailwindcss";

ビルドプロセスを開始する

npm run dev でビルドプロセスを実行します。

ターミナル

npm run dev

プロジェクトで Tailwind の使用を開始する

Tailwind のユーティリティクラスを使用してコンテンツのスタイルを設定し始めます。

App.jsx

export default function App() {
  return (
    <h1 class="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}