Skip to content

Commit

Permalink
docs: update README with Tailwind configuration instructions and RIS …
Browse files Browse the repository at this point in the history
…UI usage options

RISDEV-5337
  • Loading branch information
hamo225 committed Nov 11, 2024
1 parent 481d7e3 commit faabc59
Showing 1 changed file with 12 additions and 1 deletion.
13 changes: 12 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit faabc59

Please sign in to comment.