Tailwind CSS color scheme with Mytril
Mytril offers seamless integration with the Tailwind CSS color palette, allowing developers to harness the power of Tailwind’s extensive color options directly in their Svelte projects. With easy setup and a wide range of utility classes, you can ensure your components are responsive and visually cohesive.
How to enable the tailwind palette
- Open plugins/mytril.(js|ts).
- Add this configuration to activate the Tailwind palette:
// plugins/mytril.(js|ts)
export default {
theme: {
palette: 'tailwind'
}
};- Restart your environment to load the Tailwind color variables.
Tailwind Color Options
Once activated, you can use Tailwind’s extensive color options.
Apply Tailwind colors using CSS variables for streamlined styling:
button {
background-color: var(--stone-4);
color: var(--slate-1);
}- slate
- gray
- zinc
- neutral
- stone
- red
- pink
- rose
- fuchsia
- purple
- grape
- indigo
- blue
- sky
- cyan
- teal
- emerald
- green
- lime
- yellow
- amber
- orange
slate
slate 0
slate 1
slate 2
slate 3
slate 4
slate 5
slate 6
slate 7
slate 8
slate 9
slate 10
gray
gray 0
gray 1
gray 2
gray 3
gray 4
gray 5
gray 6
gray 7
gray 8
gray 9
gray 10
zinc
zinc 0
zinc 1
zinc 2
zinc 3
zinc 4
zinc 5
zinc 6
zinc 7
zinc 8
zinc 9
zinc 10
neutral
neutral 0
neutral 1
neutral 2
neutral 3
neutral 4
neutral 5
neutral 6
neutral 7
neutral 8
neutral 9
neutral 10
stone
stone 0
stone 1
stone 2
stone 3
stone 4
stone 5
stone 6
stone 7
stone 8
stone 9
stone 10
red
red 0
red 1
red 2
red 3
red 4
red 5
red 6
red 7
red 8
red 9
red 10
pink
pink 0
pink 1
pink 2
pink 3
pink 4
pink 5
pink 6
pink 7
pink 8
pink 9
pink 10
rose
rose 0
rose 1
rose 2
rose 3
rose 4
rose 5
rose 6
rose 7
rose 8
rose 9
rose 10
fuchsia
fuchsia 0
fuchsia 1
fuchsia 2
fuchsia 3
fuchsia 4
fuchsia 5
fuchsia 6
fuchsia 7
fuchsia 8
fuchsia 9
fuchsia 10
purple
purple 0
purple 1
purple 2
purple 3
purple 4
purple 5
purple 6
purple 7
purple 8
purple 9
purple 10
grape
grape 0
grape 1
grape 2
grape 3
grape 4
grape 5
grape 6
grape 7
grape 8
grape 9
grape 10
indigo
indigo 0
indigo 1
indigo 2
indigo 3
indigo 4
indigo 5
indigo 6
indigo 7
indigo 8
indigo 9
indigo 10
blue
blue 0
blue 1
blue 2
blue 3
blue 4
blue 5
blue 6
blue 7
blue 8
blue 9
blue 10
sky
sky 0
sky 1
sky 2
sky 3
sky 4
sky 5
sky 6
sky 7
sky 8
sky 9
sky 10
cyan
cyan 0
cyan 1
cyan 2
cyan 3
cyan 4
cyan 5
cyan 6
cyan 7
cyan 8
cyan 9
cyan 10
teal
teal 0
teal 1
teal 2
teal 3
teal 4
teal 5
teal 6
teal 7
teal 8
teal 9
teal 10
emerald
emerald 0
emerald 1
emerald 2
emerald 3
emerald 4
emerald 5
emerald 6
emerald 7
emerald 8
emerald 9
emerald 10
green
green 0
green 1
green 2
green 3
green 4
green 5
green 6
green 7
green 8
green 9
green 10
lime
lime 0
lime 1
lime 2
lime 3
lime 4
lime 5
lime 6
lime 7
lime 8
lime 9
lime 10
yellow
yellow 0
yellow 1
yellow 2
yellow 3
yellow 4
yellow 5
yellow 6
yellow 7
yellow 8
yellow 9
yellow 10
amber
amber 0
amber 1
amber 2
amber 3
amber 4
amber 5
amber 6
amber 7
amber 8
amber 9
amber 10
orange
orange 0
orange 1
orange 2
orange 3
orange 4
orange 5
orange 6
orange 7
orange 8
orange 9
orange 10
generic
white
black
Why use Tailwind colors?
Tailwind’s utility-first approach gives you more flexibility to apply responsive colors. It’s perfect for developers who want full control over their UI design without relying on predefined themes.