@singlestone/tailwind-plugin-buttons-sugar

tailwind-plugin-buttons

Buttons plugin for the Sugar design system

• Prerequisites
• Installation
  • npm
  • Yarn
  • pnpm
• Setup
• Usage

Prerequisites

• NodeJS 14+
• A functioning Tailwind setup

Installation

Install @singlestone/tailwind-plugin-buttons-sugar with your NodeJS package manager of choice.

npm

$ npm install -D @singlestone/tailwind-plugin-buttons-sugar

Yarn

$ yarn add -D @singlestone/tailwind-plugin-buttons-sugar

pnpm

$ pnpm install -D @singlestone/tailwind-plugin-buttons-sugar

Setup

After installation, add Sugar to your tailwind.config.js like so:

// tailwind.config.js
module.exports = {
  mode: "jit",
  content: [
    // change this to fit your project as necessary
    "./src/**/*.{ts,tsx}",
    "./index.html",
  ],
  plugins: [
    require("@singlestone/tailwind-plugin-buttons-sugar").sugarButtonsPlugin(),
  ],
};

Usage

Once you've followed the Installation and Setup process, you can use the CSS classes generated in your JavaScript and HTML.

Check out our Storybook for examples on how to do so.