c0d3man52

Webサイト制作

Nuxt3 + Unocssで@applyを使う方法

TailwindCSSで使える便利な「@apply」をNuxt3 + Unocssでも使えるようにする方法です。

公開日: 2024.8.18

目次

必要パッケージのインストール

まずは必要なパッケージをインストールします。と言っても、@unocss/nuxtがあればOKです。

@unocss/nuxt

インストールができたら、nuxt.config.tsのmoduleに追加します。

export default defineNuxtConfig({
  modules: [
    "@unocss/nuxt",
  ],
})

@applyを有効にする

@unocss/nuxtをインストールした状態では、@applyはまだ使えません。使えるようにするには、uno.config.tsに記載が必要です。

// uno.config.ts
import { defineConfig } from 'unocss'
import transformerDirectives from '@unocss/transformer-directives'

export default defineConfig({
  // ...
  transformers: [
    transformerDirectives(),
  ],
})

必要なのは、@unocss/transformer-directivesです。これをconfigに追加することで、@applyなどのディレクティブが使えるようになります。もし、@unocss/transformer-directivesがないというエラーが起きたら、インストールしましょう。

これでNuxtが読み込むCSSで@applyが使えるようになりました。

タグ