diff --git a/docs/pages/components/divider.md b/docs/pages/components/divider.md index 2164ac2b..bb74dc6e 100644 --- a/docs/pages/components/divider.md +++ b/docs/pages/components/divider.md @@ -15,22 +15,6 @@ import SlDivider from '@shoelace-style/shoelace/dist/react/divider'; const App = () => ; ``` -:::tip -Using TailwindCSS with Shoelace [may override divider styles](https://github.com/shoelace-style/shoelace/issues/2088), making them invisible. As a workaround, add this to your TailwindCSS input file: - -```css -@layer base { - sl-divider:not([vertical]) { - border-top: solid var(--width) var(--color); - } - - sl-divider[vertical] { - border-left: solid var(--width) var(--color); - } -} -``` -::: - ## Examples ### Width @@ -171,4 +155,20 @@ const App = () => ( ); ``` -{% endraw %} \ No newline at end of file +### Tailwind users + +Using TailwindCSS with Shoelace [may override divider styles](https://github.com/shoelace-style/shoelace/issues/2088), making them invisible. As a workaround, add this to your Tailwind config file. + +```css +@layer base { + sl-divider:not([vertical]) { + border-top: solid var(--width) var(--color); + } + + sl-divider[vertical] { + border-left: solid var(--width) var(--color); + } +} +``` + +{% endraw %}