最終更新日: 2023年08月15日

Tainwind CSS の導入

ここではTainwind CSSのインストールから開発環境の構築と設定までを行います。

Tainwind CSSはオリジナリティの高いWebデザインを簡単に構築できるCSSフレームワークです。
Bootstrapなどに慣れているユーザーにとっては簡単に扱うことができますが、初学者の方は、やや難しく感じるかもしれません。

とはいえ、Nuxt3ではTainwind CSSをサポートしているため、導入から実装まで用意に行うことができます。

1. Tainwind CSSのインストール

VS Codeのターミナルから、下記コマンドを入力します。

  • shell
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

2. nuxt.config.tsの設定

まずはassetsディレクトリを作成してから、nuxt.config.tsを設定してください。

  • shell
// VS Codeのターミナルから、assetsディレクトリを作成
> mkdir assets
  • nuxt.config.ts
  • ts
// 下記の設定をnuxt.config.tsファイルにそのままコピー
export default defineNuxtConfig({
  pages: true,
  css: ["~/assets/css/main.css"],   // 後述で作成するmain.cssをインポートする
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
});

3.tailwind.config.jsの設定

次に、tailwind.config.js に下記の設定を行います。

  • tail.config.js
  • js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue",
    'node_modules/preline/dist/*.js',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

4.main.cssの作成

まずは、assets/ ディレクトリにcssフォルダを作成します。その後、cssフォルダ内にmain.css を作成してください。main.cssのインポートに関しては、「2.nuxt.config.tsの設定」ですでに行っている状態です。

  • shell
// assetsディレクトリ内にcssフォルダを作り、その中に main.cssを作成する
> cd assets             // assetsディレクトリに移動
> mkdir css             // cssファルダを作成
> cd css                // cssファルダに移動
> new-item main.css     // main.cssファイルを作成
  • main.css
  • css
@tailwind base;
@tailwind components;
@tailwind utilities;

5.classへの記述

Tailwind CSS がキチンと有効になっているかどうかは、classにtailwind cssのコードを記述して、実際にブラウザで確認する必要があります。

app.vue下記コードを設定し、確認してみてください。

  • app.vue
  • ts
// フォントをtext-4xl倍、太字、赤色に設定する
<h2 class="text-4xl font-bold text-red-600">タイトル</h2>

もしブラウザで確認してもTailwind CSSが有効になっていない場合は、1から見直すか、公式サイトを参照してください。

6.Tainwind Cheat Sheetの活用

Tailwind CSSには非常に多くのコードがあり、すべて覚えるのは不可能です。馴れないうちは、下記のサイトを参考にしながら進めてみましょう。