😁

QuasarにTailwind CSS(v4)をぶちこむ

に公開
Tailwind CSS
PostCSS
quasar
tech

Quasar、ずっと気になっててやっと触る機会ができたので触ってみようとしたのですが、Tailwind CSSが好きすぎて普通のCSSの書き方を忘れてしまうレベルで使っていたのでQuasarにも入れようとしました。
古めの情報が多くて惑わされてしまったので、メモ書きです。

..とはいえ、今回のケースではPostCSSの設定をいじくるだけで済んだので、Quasarは関係なかったり

前提条件

  • (Quasarと)PostCSSがある
  • Tailwind(v4)を使おうとしている

インストール

当たり前のようにpnpmを使っていますがnpmでもなんでもいいです。

pnpm i -D tailwindcss @tailwindcss/postcss

設定いじくる

postcss.config.js
  import autoprefixer from 'autoprefixer';
+ import tailwindcss from '@tailwindcss/postcss';

  export default {
    plugins: [
      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',
        ],
      }),
+     tailwindcss(),
    ],
  };
css/app.css
@import 'tailwindcss';

あとはpnpm run devして、適当にかきかきして動作確認するだけ。

簡単でしたね。

Discussion