Nuxt•4w ago

Using Tailwind in a Nuxt Layer 🫥

It's not possible to have a layer provide tailwind properly right now. If someone wants to fix this with me, let's do it.

3 Replies

kapa.ai•4w ago

Hi @copym8. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You're correct that providing Tailwind CSS from a Nuxt layer and having it work seamlessly in consuming projects is currently challenging. This is a known pain point in the Nuxt ecosystem, especially when trying to share Tailwind (and related plugins like DaisyUI) via a base layer in a monorepo or as an external package. From the knowledge sources: - There are multiple reports and discussions about issues with CSS (including Tailwind) not being processed or applied correctly from a base layer. For example, dialogs or components styled in the base layer may lose their styles or not have the expected CSS applied in the consuming app layer. This is especially visible with pseudo-elements like ::backdrop not being styled as expected when the dialog is rendered from the app layer, even though it works in the base layer itself. The root cause seems to be how Nuxt and its build tools handle CSS and PostCSS processing across layers, and how Tailwind's content scanning works with respect to file locations and layer boundaries. Workarounds like importing CSS with relative paths or duplicating configuration exist, but they are not ideal or robust for published layers or external sources (Nuxt Layers not processing CSS correctly from base layer). - There is no official, clean solution yet for having a Nuxt layer provide Tailwind in a way that "just works" for all consuming projects, especially when the layer is published externally (e.g., on GitHub or npm). Current workarounds involve manual imports, adjusting Tailwind's content paths, or duplicating configuration, but these are not optimal and can be brittle (Nuxt Layers not processing CSS correctly from base layer). - The Nuxt team and community are aware of these limitations, and there is interest in improving the developer experience around layers and shared styling, but as of now, a robust, out-of-the-box solution does not exist in the knowledge sources provided. If you are interested in collaborating on a fix, you are not alone—others in the community have expressed the same desire. You may want to follow or contribute to related issues and discussions in the Nuxt repository to help drive a solution forward. Summary:
It is currently not possible to have a Nuxt layer provide Tailwind in a fully seamless and robust way for all use cases. The knowledge sources confirm this limitation and highlight the need for a better solution. If you want to work on a fix, collaborating with others in the Nuxt community is encouraged (Nuxt Layers not processing CSS correctly from base layer). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

dwol•4w ago

I've had some success using a local module in my layers to setup the tw styles and add the files to the css options. Something like: // layers/modules/assets/index.ts

import { defineNuxtModule, createResolver, installModule } from 'nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: 'assets',
  },
  defaults: {},
  async setup(_options, _nuxt) {
    const resolver = createResolver(import.meta.url)

    _nuxt.options.css.push(resolver.resolve('./base-tw.css'))
    _nuxt.options.css.push(resolver.resolve('./layout.css'))
  }
})

import { defineNuxtModule, createResolver, installModule } from 'nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: 'assets',
  },
  defaults: {},
  async setup(_options, _nuxt) {
    const resolver = createResolver(import.meta.url)

    _nuxt.options.css.push(resolver.resolve('./base-tw.css'))
    _nuxt.options.css.push(resolver.resolve('./layout.css'))
  }
})

Then in the css file tell it to reference itself:

@source "../../../../app/";

@source "../../../../app/";

This is mostly working but I'll still randomly get some styles not coming through properly. Only a couple colors and @sm @container etc modifiers. If someone could improve this that would be awesome.

Gaming

Programming

Using Tailwind in a Nuxt Layer 🫥

Did you find this page helpful?