CSS の設定と CSS フレームワークの適用⚓︎

AlesInfiny Maris OSS Edition では、特定の CSS フレームワークを採用することを推奨しているわけではありません。 本章では、一例として Tailwind CSS を導入する手順を紹介しますが、 実際の開発プロジェクトでは、プロジェクトの特性に応じた技術を選定してください。

CSS の設定⚓︎

Vue.js のブランクプロジェクトを作成すると、デフォルトで以下の 2 つの CSS ファイルが追加されます。

• ./src/assets/base.css
• ./src/assets/main.css

また、./src/main.ts に、以下のように main.css を読み込むコードが自動的に追加されます。

1

import './assets/main.css'

サンプルアプリケーションでは base.css に統一します。

1. ./src/assets/main.css を削除します。
2. ./src/main.ts の import を以下のように書き換えます。

1

import './assets/base.css'

Tailwind CSS⚓︎

Tailwind CSS は、 あらかじめ用意されたユーティリティクラスを組み合わせることで、 CSS ファイルを記述せずにデザインを実現する、ユーティリティファーストな CSS フレームワークです。

Tailwind CSS のインストール⚓︎

公式ドキュメント が推奨するとおり、 PostCSS のプラグインとして Tailwind CSS 、 PostCSS 、 autoprefixer をインストールします。

Installing Tailwind CSS as a PostCSS plugin is the most seamless way to integrate it with build tools like webpack, Rollup, Vite, and Parcel.

1

npm install -D tailwindcss postcss autoprefixer postcss-nesting

• PostCSS

  PostCSS で説明します。

• autoprefixer

  CSS に対してベンダープレフィクスを自動的に付与する PostCSS のプラグインです。このプラグインを使用することにより、ベンダープレフィクスを意識する必要が無くなります。

• postcss-nesting

  CSS Nesting の仕様に従って、スタイルルールを互いに入れ子にできる PostCSS のプラグインです。

Tailwind CSS の設定⚓︎

以下のコマンドを入力すると、./tailwind.config.js ファイルが作成されます。

1

npx tailwindcss init

作成された直後の tailwind.config.js は以下のとおりです（Tailwind CSS 3.4.13 の場合）。

1
2
3
4
5
6
7
8

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

content に、 Tailwind CSS を適用する対象ファイルのパス（ワイルドカード使用可）を設定します。

1
2
3
4
5
6
7
8

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

./src/assets/base.css の最初の行に、以下のように Tailwind CSS の各コンポーネントの @tailwind ディレクティブを追加します。

1
2
3

@tailwind base;
@tailwind components;
@tailwind utilities;

PostCSS⚓︎

CSS を操作するための JavaScript ベースのプラグインです。このプラグインの API を利用する多くのプラグインが公開されており、前述の Tailwind CSS もその１つです。

PostCSS は Tailwind CSS と一緒にすでにインストール済みなので、インストールの必要はありません。

PostCSS の設定⚓︎

設定ファイル ./postcss.config.cjs を作成します。

1
2
3
4
5
6
7

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('postcss-nesting'),
  ],
};

プラグインとして Tailwind CSS 、 autoprefixer 、 postcss-nesting を使用することを宣言します。