[V4] How to use multiple Presets in monorepo? #15161
-
How to import or enable preset configs in the CSS file in V4? Use Case
Based on this #15119 (reply in thread), it seems Presets are dead. 😢 Is it so? Real world use caseI have a Monorepo with multiple repo present in Currently, this is the Nuxt Module's css file: // packages/base-module/src/runtime/assets/tw.css
@import "tailwindcss" source(none);
@source "../../components";
/* @plugin "@tailwindcss/typography"; */
@plugin "tailwindcss-animate";
@variant dark (&:where(.dark, .dark *));
@theme {
--font-suse: "SUSE", sans-serif;
--color-primary-50: var(--color-orange-50);
--color-primary-100: var(--color-orange-100);
--color-secondary-50: var(--color-lime-50);
--color-secondary-100: var(--color-lime-100);
--color-surface-50: var(--color-gray-50);
--color-surface-100: var(--color-gray-100);
...
} This file is being unshifted in the Now, in another Nuxt app (call it MAIN), the Nuxt Module is used in the nuxt config. // src/main-app/assets/tw.css
@import "tailwindcss" source(none); Points of consideration
|
Beta Was this translation helpful? Give feedback.
Replies: 3 comments
-
In the Nuxt Module tw.css file, just tried refactoring the themes, utilities, plugins, etc. into a separate base.css file and keeping the source in tw.css file itself. In the main app, imported the base.css file in the main app's tw.css file, and it works 😄 . Also, importing it at the top of the file and then, writing own themes in the main app's file also helps to override the base themes. So, points 2 and 3 are solved. I am still confused how the source works though! I am mentioning the source to be none in both files. Only the Module's tw.css has 1 source Note that I am still using the Module in the main app's nuxt config; so this adds the Module's tw.css to the main app. |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
Could you provide a reproduction with your solution please |
Beta Was this translation helpful? Give feedback.
In the Module's code, removed the line where the Module's tw.css was being unshifted to the Nuxt's css array.
Now none of the classes works. Which is logical, because no source is set.
I just set the sources (e.g., components folder, pages folder, etc.) in the main app's tw.css. Now, the classes work.
I like this setup because the main app can control where to apply the base file and where to apply the main file.
The components inside the Module should also works nicely (yet to test). In such base components, I can use classes such as
text-primary-500
and it is up to the main app to decide what the primary color will be. Perfect. But will need to add proper source inside the Module's tw…