@zendeskgarden/tailwindcss
v4.0.2
Published
Garden Design Tokens
Downloads
13,505
Maintainers
Readme
Garden Design Tokens
:seedling: Garden is the design system by Zendesk
A Tailwind CSS plugin for generating CSS based on the Garden theme object.
Installation
npm install @zendeskgarden/tailwindcss
Usage
Add the plugin to your tailwind.config.js
:
// tailwind.config.js
module.exports = {
plugins: [require('@zendeskgarden/tailwindcss')]
};
Utility Classes
Apply Garden design tokens using Tailwind utility classes.
<img
class="rounded-full h-8 w-8 border border-mint-500 dark:border-mint-400"
src="avatar.png"
alt="Avatar"
/>
Class Composition with @apply
Tailwind provides several PostCSS directives for inserting utility styles into CSS. The @apply directive allows consumers to reference a specific utility value. This enables support for more advanced functionality like CSS modules.
.title {
@apply text-grey-900;
@apply dark:text-grey-300;
@apply text-sm;
@apply px-4;
@apply font-light;
}
Configuration
The plugin provides an optional includeBedrock
setting which
can be used to disable Garden's css-bedrock
reset.
// tailwind.config.js
module.exports = {
plugins: [
require('@zendeskgarden/tailwindcss')({
includeBedrock: false // defaults to true
})
]
};
Tooling
The Tailwind CSS IntelliSense VS Code plugin provides autocomplete, syntax highlighting, and linting based on your Tailwind config. It is very helpful as the Garden-provided utilities differ slightly from those shown in the Tailwind documentation.
Contribution
Thanks for your interest in Garden! Community involvement helps make our design system fresh and tasty for everyone.
Got issues with what you find here? Please feel free to create an issue.
Community behavior is benevolently ruled by a code of conduct. Please participate accordingly.
License
Copyright 2021 Zendesk
Licensed under the Apache License, Version 2.0