{
  "name": "resources/tailwind",
  "title": "Tailwind",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/resources/tailwind/",
  "sections": [
    {
      "heading": "Tailwind",
      "markdown": "eurodata-ui offers a wide range of [CSS utilities](https://test-apps.eurodata.de/a/eurodata-ui/docs/theming/) that often remove the need for a CSS framework like Tailwind. However, if your project already relies on Tailwind — or you want to use it alongside eurodata-ui — we provide a dedicated **`resets/tailwind.css`** to ensure both systems work together correctly."
    },
    {
      "heading": "Import order",
      "markdown": "The order in which you import Tailwind and eurodata-ui is **critical**.\n\nTailwind’s _Preflight_ applies resets to many browser defaults. For example, it:\n\n-   Removes all margins and paddings from elements\n-   Resets heading font sizes and font weights\n\neurodata-ui also defines its own defaults.  \nIf Tailwind is imported **after** eurodata-ui, Tailwind’s resets will override and effectively break eurodata-UI’s styling. Always import **Tailwind before eurodata-ui** so that eurodata-UI styles can properly re-apply on top of Tailwind’s resets.\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<link rel=\"stylesheet\" href=\"node_modules/@eurodata/eurodata-ui/dist/styles/eurodata.css\" />\n<script type=\"module\" src=\"node_modules/@eurodata/eurodata-ui/dist/components/button/button.js\"></script>\n<script type=\"module\" src=\"node_modules/@eurodata/eurodata-ui/dist/components/icon/icon.js\"></script>\n```"
    },
    {
      "heading": "Tailwind resets",
      "markdown": "Even with the correct import order, some edge cases remain. Due to the interaction between:\n\n-   Tailwind’s global styles\n-   Lit components\n-   Shadow DOM boundaries\n-   CSS cascading rules certain Tailwind resets may still leak into eurodata-ui components.\n\nTo handle these cases, eurodata-ui provides `resets/tailwind.css`, which restores the expected defaults where needed. Import `resets/tailwind.css` last in your stylesheet chain:\n\n```html\n<link rel=\"stylesheet\" href=\"node_modules/@eurodata/eurodata-ui/dist/styles/resets/tailwind.css\" />\n```\n\neurodata-ui is still a work in progress, and we cannot guarantee that every possible Tailwind edge case is already covered. If you encounter an unhandled issue:\n\n-   Please [create an issue](https://git.eurodata.de/tooling-services/eurodata-ui/eurodata-ui/-/issues), or\n-   Reach out to us directly via MS Teams."
    }
  ]
}