---
title: TailwindCSS
---

<script>
  import { Button } from 'slender-ui'
</script>

The above is ideal for a consistent and maintainable design system, but on the odd occasion it's useful to pass in class names directly:

<!-- prettier-ignore -->
```svelte
<Button class="bg-cyan-300 text-cyan-900 hover:bg-cyan-400 rounded-none">
  Loves me better
</Button>
```

<Button class="bg-cyan-300 text-cyan-900 hover:bg-cyan-400 rounded-none">
  Loves me better
</Button>