Wondering what’s next for npm?Check out our public roadmap! »

    @zendeskgarden/tailwindcss
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    Garden Design Tokens npm version Build Status Dependency Status

    🌱 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-green-600" src="avatar.png" alt="Avatar" />

    Remove unused CSS using Tailwind's purge option.

    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-600;
      @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.

    Tailwind CSS IntelliSense plugin example

    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

    Install

    npm i @zendeskgarden/tailwindcss

    DownloadsWeekly Downloads

    375

    Version

    2.0.0

    License

    Apache-2.0

    Unpacked Size

    2.86 MB

    Total Files

    10

    Last publish

    Collaborators

    • avatar