Nuxt•5mo ago

nuxt ui tailwind @apply in style tag for custom classes?

Hi, I'm making my privacy policy page with nuxt ui and tailwindcssv4, I have a lot of reused sections here so I made my own css classes like "policy-content-section" I now want to apply tailwind classes to these custom classes in the style section is this the right approach? as it seems none of these tailwind classes are being resolved and im getting errors.

<style scoped>
.page-main-title, .section-title {
  @apply uppercase text-success dark:text-white;
  @apply border-b border-cool-300 dark:border-cool-700;
  @apply pb-2l
}

.page-main-title {
  @apply text-3xl sm:text-4xl font-bold;
  @apply mb-1;
}

<style scoped>
.page-main-title, .section-title {
  @apply uppercase text-success dark:text-white;
  @apply border-b border-cool-300 dark:border-cool-700;
  @apply pb-2l
}

.page-main-title {
  @apply text-3xl sm:text-4xl font-bold;
  @apply mb-1;
}

what's the right way to do this properly?

11 Replies

kapa.ai•5mo ago

Hi @WiFi Plug. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You are correct that with Nuxt UI and Tailwind CSS v4, you should be able to use the @apply directive to compose custom classes from Tailwind utilities. However, there are a few important caveats and best practices: 1. Where to Use @apply:
The @apply directive must be used in your main CSS files (like assets/css/main.css), not inside <style scoped> blocks in your Vue components. Tailwind's JIT engine and PostCSS process your main CSS files, but do not process @apply inside Vue SFC <style scoped> blocks. This is why your custom classes are not being resolved and you see errors. 2. How to Define Custom Classes:
Move your custom class definitions to your main CSS file. For example:

   /* assets/css/main.css */
   @import "tailwindcss";
   @import "@nuxt/ui";

   .page-main-title, .section-title {
     @apply uppercase text-success dark:text-white;
     @apply border-b border-cool-300 dark:border-cool-700;
     @apply pb-2l;
   }

   .page-main-title {
     @apply text-3xl sm:text-4xl font-bold;
     @apply mb-1;
   }

   /* assets/css/main.css */
   @import "tailwindcss";
   @import "@nuxt/ui";

   .page-main-title, .section-title {
     @apply uppercase text-success dark:text-white;
     @apply border-b border-cool-300 dark:border-cool-700;
     @apply pb-2l;
   }

   .page-main-title {
     @apply text-3xl sm:text-4xl font-bold;
     @apply mb-1;
   }

Then, use these classes in your Vue templates as usual. 3. Why This Works:
Tailwind CSS v4 uses a CSS-first configuration and expects customizations and utility composition to happen in your main CSS files, not in SFC <style> blocks. This is part of the new approach described in the Nuxt UI documentation, which emphasizes customizing your theme and styles via CSS files using the @theme directive and similar features, rather than JavaScript config or SFC stylesNuxt UI Theme Customization. Summary:
Move your @apply usage to your main CSS file (e.g., assets/css/main.css). Do not use @apply inside <style scoped> in your Vue components, as Tailwind will not process it there. For more on this approach, see the Nuxt UI theming documentation: Nuxt UI Theme Customization. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

WiFi PlugOP•5mo ago

@kapa.ai oh okay but as my project grows and i have more css potentially customised so less stuff is duplicated like in my privacy policy wont my main assets/css/main.css get very long? should i have a seperate css file for the privacy policy styles etc?

kapa.ai•5mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, as your project grows, it's a good idea to organize your CSS to keep things maintainable. Nuxt recommends placing your stylesheets in the assets/ directory, and you can absolutely split your CSS into multiple files for different sections or features (e.g., a separate CSS file for your privacy policy styles) Styling Guide. You can then import these CSS files in your main CSS file or reference them in your nuxt.config.ts using the css property. For example:

export default defineNuxtConfig({
  css: [
    '~/assets/css/main.css',
    '~/assets/css/privacy-policy.css'
  ]
})

export default defineNuxtConfig({
  css: [
    '~/assets/css/main.css',
    '~/assets/css/privacy-policy.css'
  ]
})

Alternatively, you can import section-specific CSS files directly in your page or layout components if you want them to be loaded only when needed Styling Guide:

<script>
import '~/assets/css/privacy-policy.css'
</script>

<script>
import '~/assets/css/privacy-policy.css'
</script>

This approach helps keep your styles modular and easier to manage as your project grows. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

WiFi PlugOP•5mo ago

@kapa.ai so then i should make a privacy-policy.css file and then should i define that in my main nuxt config like i did my main.css or should i just import it to my privacy-policy page what's the pros and cons

kapa.ai•5mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You have two main options for including your privacy-policy.css file in your Nuxt project: 1. Add to nuxt.config.ts via the css property

export default defineNuxtConfig({
  css: [
    '~/assets/css/main.css',
    '~/assets/css/privacy-policy.css'
  ]
})

export default defineNuxtConfig({
  css: [
    '~/assets/css/main.css',
    '~/assets/css/privacy-policy.css'
  ]
})

Pros: - The styles are loaded globally and available on every page. - Good for styles that are reused across multiple pages or layouts. Cons: - Increases the global CSS bundle size, even if the styles are only needed on one page. - Not optimal if the styles are only relevant to the privacy policy page. 2. Import directly in your privacy policy page

<script>
import '~/assets/css/privacy-policy.css'
</script>

<script>
import '~/assets/css/privacy-policy.css'
</script>

Pros: - Styles are only loaded when the privacy policy page is rendered, reducing unnecessary CSS on other pages. - Keeps your global CSS bundle smaller and your styles more modular. Cons: - If you need the same styles elsewhere, you’ll have to import them again or move them to a global file. --- Summary:
If your privacy-policy.css is only used on the privacy policy page, importing it directly in that page is more efficient and keeps your global CSS smaller. If you expect to reuse those styles elsewhere, adding it to the css property in nuxt.config.ts makes sense. Both approaches are supported by Nuxt and described in the official documentation Styling Guide. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

WiFi PlugOP•5mo ago

@kapa.ai <style> @import url("~/assets/css/legal-styles.css"); </style> i tried to import it like this on my page, do i need anything specific in the legal-styles.css file to ensure tailwind classes are available within it?

kapa.ai•5mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To ensure Tailwind classes are available in your legal-styles.css file, you need to include the Tailwind directives at the top of the file:

@import "tailwindcss";

@import "tailwindcss";

This will make all Tailwind utilities available for use within that CSS file. If you are also using Nuxt UI or Nuxt UI Pro, you can import them as well:

@import "tailwindcss";
@import "@nuxt/ui";      /* or @nuxt/ui-pro if using UI Pro */

@import "tailwindcss";
@import "@nuxt/ui";      /* or @nuxt/ui-pro if using UI Pro */

Important:
Simply importing your CSS file in a <style> block with @import url("~/assets/css/legal-styles.css"); will not process Tailwind directives, because Tailwind's JIT engine and PostCSS only process files included via the Nuxt css property or imported in your main CSS file. Importing via <style> in a Vue component does not run the file through Tailwind/PostCSS, so Tailwind classes defined with @apply or custom classes using Tailwind utilities will not work as expected in this scenario Nuxt Styling Guide. Correct Approach:
- Add legal-styles.css to the css array in your nuxt.config.ts:

  export default defineNuxtConfig({
    css: [
      '~/assets/css/main.css',
      '~/assets/css/legal-styles.css'
    ]
  })

  export default defineNuxtConfig({
    css: [
      '~/assets/css/main.css',
      '~/assets/css/legal-styles.css'
    ]
  })

- Or, import it in your main CSS file (e.g., main.css):

  @import "./legal-styles.css";

  @import "./legal-styles.css";

This ensures Tailwind and PostCSS process your file, making all Tailwind classes and customizations available Nuxt Styling Guide. Summary:
- Add Tailwind imports at the top of your CSS file. - Import the CSS file via nuxt.config.ts or your main CSS file, not via <style> in a Vue component, to ensure Tailwind classes are available and processed correctly. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

nuxt ui tailwind @apply in style tag for custom classes?

Did you find this page helpful?