@apply Tailwind CSS class in a component's `<style>` tag

[sergiuwaxmann]

For what version of Nuxt UI are you asking this question?

v3.0.0-alpha.x

Description

In my Nuxt 3 project (that uses Nuxt UI v3.0.0-alpha9), I have a Vue component like this:

<script setup lang="ts">
...
</script>

<template>
  <UContainer class="section">
    ...
  </UContainer>
</template>

<style scoped lang="scss">
@use "tailwindcss";

.section + .section {
  @apply mt-8 lg:mt-12;
}
</style>

The problem is that @apply mt-8 lg:mt-12; doesn't work unless I add this to my nuxt.config.ts:

postcss: {
  plugins: {
    "@tailwindcss/postcss": {}, // https://tailwindcss.com/docs/v4-beta#using-post-css
  },
},

However, when I do this, the Nuxt UI components stop working properly (e.g., Slideover renders at the bottom of the page and with wrong styling). How can I make the @apply ... work without breaking the Nuxt UI components?

This is my package.json:

{
  "name": "frontend",
  "private": true,
  "type": "module",
  "scripts": {
    "postinstall": "husky install && nuxt prepare",
    "dev": "nuxt dev",
    "build": "nuxt build",
    "preview": "nuxt preview"
  },
  "dependencies": {
    "@nuxt/ui": "^3.0.0-alpha.9",
    "nuxt": "latest",
    "nuxt-svgo": "latest",
    "vue": "latest",
    "vue-router": "latest"
  },
  "devDependencies": {
    "@commitlint/cli": "latest",
    "@commitlint/config-conventional": "latest",
    "husky": "latest",
    "sass": "latest"
  }
}

This is my nuxt.config.ts:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: "2024-04-03",
  devtools: { enabled: false },
  modules: ["@nuxt/ui", "nuxt-svgo"],
  css: ["@/assets/css/main.css"],
  // postcss: {
  //   plugins: {
  //     "@tailwindcss/postcss": {}, // https://tailwindcss.com/docs/v4-beta#using-post-css
  //   },
  // },
  appConfig: {
    // https://ui3.nuxt.dev/getting-started/theme#colors
    ui: {
      colors: {
        primary: "primary", // Defined in `assets/css/theme.css`
        secondary: "secondary", // Defined in `assets/css/theme.css`
      },
    },
  },
});

This is my assets/main.css:

/* https://ui3.nuxt.dev/getting-started/installation/nuxt#import-tailwind-css-and-nuxt-ui-in-your-css */
@import "tailwindcss";
@import "@nuxt/ui";

[benjamincanac]

Have you checked https://tailwindcss.com/docs/v4-beta#using-apply-in-vue-svelte?

[sergiuwaxmann]

@benjamincanac
Adding @import "tailwindcss/theme" theme(reference); to the <style> tag resolved the issue. I must have missed this in the documentation. Thank you!