js/shoelace
1
0
Fork 0
mirror of https://github.com/shoelace-style/shoelace.git synced 2026-01-12 02:59:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

move to section

Browse Source
This commit is contained in:
Cory LaViska
2025-02-03 14:30:49 -05:00
parent 69cf94b512
commit b5f308c835
1 changed files with 17 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
docs/pages/components/divider.md
View File

@@ -15,22 +15,6 @@ import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
const App = () => <SlDivider />;
```
:::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 %}
### 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 %}