Quasar プロジェクトに Tailwind CSS をセットアップする

Quasar Framework をプライベートで利用することが多くなり，Tailwind CSS を導入しようとする度に検索しているので一連の作業を残しておきます．

環境

• Node.js: 22.4.0
• @quasar/cli: 2.4.1
• @quasar/app-vite 1.9.3

Quasar プロジェクトの作成

Quasar Framework の HP 通りにインストールします．

shell

npm init quasar

プロジェクトの設定は以下の通りです．

• App with Quasar CLI
• Quasar v2 (Vue 3)
• TypeScript
• Quasar App CLI with Vite 2
• Composition API with
• Sass with SCSS syntax
• features:
  • Linting (vite-plugin-checker + ESLint + vue-tsc)
  • State Management (Pinia)
  • axios
  • vue-i18n

Tailwind CSS の導入

基本的に Tailwind CSS のこちらのページを参考にしています．

shell

npm install -D tailwindcss
npx tailwindcss init

# 必要に応じて
npm install -D \
  @tailwindcss/typography@latest \
  @tailwindcss/forms@latest \
  @tailwindcss/aspect-ratio@latest \
  @tailwindcss/line-clamp@latest \
  @heroicons/vue

tailwind.config.js が生成されますので，エディタで開いて編集します．

tailwind.config.js

/** @type {import('tailwindcss').Config} */
- module.exports = {
-   content: [],
-   theme: {
-     extend: {},
-   },
-   plugins: [],
- }
+ export const content = ['./index.html', './src/**/*.{js,ts,jsx,tsx,vue}'];
+ export const theme = {
+     extend: {},
+ };
+ export const plugins = [];

CommonJS module から ES module に変換し，Vue・TypeScript のプロジェクト用にセットアップしました．

次に，app.css に Tailwind CSS のユーティリティクラスをインポートします．

src/css/app.scss

  // app global css in SCSS form
+ @import 'tailwindcss/base';
+ @import 'tailwindcss/components';
+ @import 'tailwindcss/utilities';

最後に，postcss.config.cjs を編集し tailwindcss プラグインを取り込みます．

postcss.config.cjs

  /* eslint-disable */
  // https://github.com/michael-ciniawsky/postcss-load-config

  module.exports = {
    plugins: [
+     require('tailwindcss'),
      // https://github.com/postcss/autoprefixer
      require('autoprefixer')({
        overrideBrowserslist: [
          'last 4 Chrome versions',
          'last 4 Firefox versions',
          'last 4 Edge versions',
          'last 4 Safari versions',
          'last 4 Android versions',
          'last 4 ChromeAndroid versions',
          'last 4 FirefoxAndroid versions',
          'last 4 iOS versions',
        ],
      }),

      // https://github.com/elchininet/postcss-rtlcss
      // If you want to support RTL css, then
      // 1. yarn/npm install postcss-rtlcss
      // 2. optionally set quasar.config.js > framework > lang to an RTL language
      // 3. uncomment the following line:
      // require('postcss-rtlcss')
    ],
  };

導入作業は以上です！

動作確認

Tailwind CSS UI が提供している Pricing Section の Vue 用コードを ExampleComponent.vue に貼り付けて動作確認してみました．

ちゃんと動作していますね！