Visual Studio で Tailwind CSS を使う

Tech Knowledge
公開: 2024-10-30

Tailwind CSSのインストール

プロジェクトフォルダに移動後、以下のコマンドを実行

npm install -D tailwindcss

Tailwind CSSの設定ファイルを作成

npx tailwindcss init

設定ファイルを修正

content で対象となるファイル(html など)を指定

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
    content: ["./src/**/*.{html,ts,tsx}"],
    theme: {
        extend: {},
    },
    plugins: [],
}

cssファイルを作成

--watch オプションを付けると自動生成モードになる(コマンドプロンプトが終了しない)

npx tailwindcss -i ./src/input.css -o ./src/styles/tailwind.css --watch

参考

利用者爆増中 初めてでもわかるTailwind CSS入門 基礎編