Core plugin for the sugar design system
- NodeJS 14+
- A functioning Tailwind setup
Install @singlestone/sugar
with your NodeJS package manager of choice.
$ npm install -D @singlestone/sugar
$ yarn add -D @singlestone/sugar
$ pnpm install -D @singlestone/sugar
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/sugar").sugarCorePlugin()],
};
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.
You can customize the colors that Sugar uses by default by providing colors objects in your Tailwind config.
// tailwind.config.js
const colors = require("tailwindcss/colors");
module.exports = {
mode: "jit",
content: [
// change this to fit your project as necessary
"./src/**/*.{ts,tsx}",
"./index.html",
],
theme: {
extend: {
colors: {
// You can use built in Tailwind colors!
accent: colors.purple,
// You can provide your own colors!
// Make sure to provide the full range of colors when possible.
// At the very least, provide the below entries:
// 50, 200, 400, and 600
destructive: {
50: "#fef2f2",
100: "#fee2e2",
200: "#fecaca",
300: "#fca5a5",
400: "#f87171",
500: "#ef4444",
600: "#dc2626",
700: "#b91c1c",
800: "#991b1b",
900: "#7f1d1d",
},
neutral: colors.slate,
},
},
},
plugins: [require("@singlestone/sugar").sugarCorePlugin()],
};