Resolve duplicate tailwind classes

README.md

@@ -91,20 +91,31 @@ If not using Tailwind, you may also add these styles directly to the `css` secti
 
 ## Tailwind usage
 
-If you want, also install the Tailwind preset (for colors, spacings, etc.) and plugin (for typography classes, etc.):
+If you’re using RIS UI with Tailwind, you need to add the RIS UI Tailwind preset (for colors, spacings, etc.) and plugin (for typography classes, etc.)
 
 ```diff
   // tailwind.config.js
 + import { RisUiPreset, RisUiPlugin } from "@digitalservicebund/ris-ui/tailwind";
 
   export default {
+  content: [
++    "./node_modules/@digitalservicebund/ris-ui/dist/**/*.{js,vue,ts}",
+  ],
+
 +   presets: [RisUiPreset],
 +   plugins: [RisUiPlugin],
 
     // your other configuration
   };
 ```
 
+##### Additional Configuration for Tailwind Projects
+
+- Avoid importing `@digitalservicebund/ris-ui/primevue/style.css` in `main.ts` to prevent duplicate styles.
+- Include the path to the RIS-UI files in the content array of your Tailwind config to ensure all necessary classes are generated.
+
+##### Important Note for Nuxt Projects
+
 To avoid issues with conflicting `@layer` directives, make sure to integrate the `postcss-import` module in your PostCSS configuration:
 
 See https://tailwindcss.com/docs/adding-custom-styles#using-multiple-css-files

src/primevue/dialog/dialog.ts

@@ -1,6 +1,5 @@
 import { tw } from "@/lib/tags";
 import { DialogPassThroughOptions } from "primevue/dialog";
-import "./dialog.css";
 
 const dialog: DialogPassThroughOptions = {
   root: () => {
@@ -36,7 +35,7 @@ const dialog: DialogPassThroughOptions = {
     // (for example) by the confirm dialog. If the svg is not the first child,
     // we assume that it is used in the context of some other layout and don't
     // apply extra styling.
-    class: tw`ris-dialog-content overflow-auto has-[svg:first-child]:flex has-[svg:first-child]:gap-8`,
+    class: tw`ris-dialog-content overflow-auto has-[svg:first-child]:flex has-[svg:first-child]:gap-8 [&>svg:first-child]:flex-none`,
   },
 
   footer: {

src/primevue/inputText/inputText.ts

@@ -1,9 +1,8 @@
 import { tw } from "@/lib/tags";
 import { InputTextPassThroughOptions } from "primevue/inputtext";
-import "./inputText.css";
 
 // Base
-export const base = tw`border-2 border-blue-800 bg-white outline-4 -outline-offset-4 outline-blue-800 placeholder:text-gray-800 read-only:cursor-not-allowed read-only:border-blue-300 read-only:bg-blue-300 hover:outline focus:outline disabled:border-blue-500 disabled:bg-white disabled:text-blue-500 disabled:outline-none aria-[invalid]:border-red-800 aria-[invalid]:bg-red-200 aria-[invalid]:outline-red-800 aria-[invalid]:disabled:outline-none`;
+export const base = tw`border-2 border-blue-800 bg-white outline-4 -outline-offset-4 outline-blue-800 [&+small]:ris-label3-regular placeholder:text-gray-800 read-only:cursor-not-allowed read-only:border-blue-300 read-only:bg-blue-300 hover:outline focus:outline disabled:border-blue-500 disabled:bg-white disabled:text-blue-500 disabled:outline-none aria-[invalid]:border-red-800 aria-[invalid]:bg-red-200 aria-[invalid]:outline-red-800 aria-[invalid]:disabled:outline-none [&+small]:mt-4 [&+small]:flex [&+small]:items-center [&+small]:gap-4 [&+small]:text-gray-900 [&[aria-invalid="true"]+small]:text-red-900`;
 
 // Sizes
 export const small = tw`ris-body2-regular h-48 px-16 py-4`;

src/primevue/select/select.ts

@@ -1,11 +1,10 @@
 import { tw } from "@/lib/tags.ts";
 import { SelectPassThroughOptions } from "primevue/select";
-import "./select.css";
 
 const select: SelectPassThroughOptions = {
   root: ({ props, state }) => {
     // Base
-    const base = tw`ris-body2-regular inline-flex h-48 items-center justify-between border-2 bg-white py-4 pl-16 pr-12 outline-4 -outline-offset-4`;
+    const base = tw`ris-body2-regular inline-flex h-48 items-center justify-between border-2 bg-white py-4 pl-16 pr-12 outline-4 -outline-offset-4 [&+small]:ris-label3-regular [&+small]:mt-2 [&+small]:flex [&+small]:items-center [&+small]:gap-4 [&+small]:text-gray-900 [&[aria-invalid="true"]+small]:text-red-900`;
 
     // States
     const normal = tw`cursor-pointer border-blue-800 outline-blue-800`;

src/primevue/textarea/textarea.ts

@@ -1,11 +1,10 @@
 import { tw } from "@/lib/tags";
 import { TextareaPassThroughOptions } from "primevue/textarea";
-import "./textarea.css";
 
 const textarea: TextareaPassThroughOptions = {
   root: ({ props }) => {
     // Base
-    const base = tw`ris-body1-regular min-h-56 border-2 border-blue-800 bg-white px-14 pb-12 pt-8 outline-4 -outline-offset-4 outline-blue-800 placeholder:text-gray-900 read-only:cursor-not-allowed read-only:border-blue-300 read-only:bg-blue-300 hover:outline focus:outline disabled:border-blue-500 disabled:bg-white disabled:text-blue-500 disabled:outline-none aria-[invalid]:border-red-800 aria-[invalid]:bg-red-200 aria-[invalid]:outline-red-800 aria-[invalid]:disabled:outline-none`;
+    const base = tw`ris-body1-regular min-h-56 border-2 border-blue-800 bg-white px-14 pb-12 pt-8 outline-4 -outline-offset-4 outline-blue-800 [&+small]:ris-label3-regular placeholder:text-gray-900 read-only:cursor-not-allowed read-only:border-blue-300 read-only:bg-blue-300 hover:outline focus:outline disabled:border-blue-500 disabled:bg-white disabled:text-blue-500 disabled:outline-none aria-[invalid]:border-red-800 aria-[invalid]:bg-red-200 aria-[invalid]:outline-red-800 aria-[invalid]:disabled:outline-none [&+small]:mt-2 [&+small]:flex [&+small]:items-center [&+small]:gap-4 [&+small]:text-gray-900 [&[aria-invalid="true"]+small]:text-red-900`;
 
     // Integration for primevue/fluid
     const fluid = tw`w-full`;