From faabc5983a8f9448b9b2b109734dbf5ada7fbd08 Mon Sep 17 00:00:00 2001
From: Tarek Hamaoui <tarek.hamaoui@digitalservice.bund.de>
Date: Mon, 11 Nov 2024 13:12:25 +0100
Subject: [PATCH] docs: update README with Tailwind configuration instructions
 and RIS UI usage options

RISDEV-5337
---
 README.md | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 475b5ea..e30dfd1 100644
--- a/README.md
+++ b/README.md
@@ -91,13 +91,17 @@ 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],
 
@@ -105,6 +109,13 @@ If you want, also install the Tailwind preset (for colors, spacings, etc.) and p
   };
 ```
 
+##### 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