Skip to content
This repository was archived by the owner on Mar 24, 2026. It is now read-only.

Commit b5f308c

Browse files
committed
move to section
1 parent 69cf94b commit b5f308c

File tree

1 file changed

+17
-17
lines changed

1 file changed

+17
-17
lines changed

docs/pages/components/divider.md

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -15,22 +15,6 @@ import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
1515
const App = () => <SlDivider />;
1616
```
1717

18-
:::tip
19-
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:
20-
21-
```css
22-
@layer base {
23-
sl-divider:not([vertical]) {
24-
border-top: solid var(--width) var(--color);
25-
}
26-
27-
sl-divider[vertical] {
28-
border-left: solid var(--width) var(--color);
29-
}
30-
}
31-
```
32-
:::
33-
3418
## Examples
3519

3620
### Width
@@ -171,4 +155,20 @@ const App = () => (
171155
);
172156
```
173157

174-
{% endraw %}
158+
### Tailwind users
159+
160+
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.
161+
162+
```css
163+
@layer base {
164+
sl-divider:not([vertical]) {
165+
border-top: solid var(--width) var(--color);
166+
}
167+
168+
sl-divider[vertical] {
169+
border-left: solid var(--width) var(--color);
170+
}
171+
}
172+
```
173+
174+
{% endraw %}

0 commit comments

Comments
 (0)