Tailwind CSS ホームページ
  1. インストール
  2. Nuxt で Tailwind CSS をインストール

  1. プロジェクトの作成

    まだ設定されていない場合は、新しい Nuxt プロジェクトを作成することから始めます。最も一般的なアプローチは、 Nuxt コマンドラインインターフェース.

    ターミナル
    npx nuxi init my-projectcd my-project

  2. Tailwind CSS のインストール

    npm を介して `tailwindcss` とそのピア依存関係をインストールし、`tailwind.config.js` ファイルを生成するために init コマンドを実行します。

    ターミナル
    npm install -D tailwindcss postcss autoprefixernpx tailwindcss init

  3. PostCSS 設定への Tailwind の追加

    `tailwindcss` と `autoprefixer` を `nuxt.config.js` ファイルの `postcss.plugins` オブジェクトに追加します。

    nuxt.config.js
    // https://nuxt.dokyumento.jp/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
})

  4. テンプレートパスの設定

    `tailwind.config.js` にすべてのテンプレートファイルへのパスを追加します。ファイル。

    tailwind.config.js
    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    "./error.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

  5. CSS への Tailwind ディレクティブの追加

    `./assets/css/main.css` ファイルを作成し、Tailwind の各レイヤーに `@tailwind`ディレクティブを追加します。

    main.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

  6. CSS ファイルのグローバル追加

    新しく作成した `./assets/css/main.css` を `nuxt.config.js` ファイルの `css` 配列に追加します。

    nuxt.config.js
    // https://nuxt.dokyumento.jp/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
})

  7. ビルドプロセスの開始

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

    ターミナル
    npm run dev

  8. プロジェクトでの Tailwind の使用開始

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

    app.vue
    <template>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</template>