Configuration

For version 4.0.0, the configuration file has been added so that you can customize everything from colors to custom components the default config is .

// twigwind.config.js
const colors = {
  "red": [[26, 0, 0], [71, 0, 0], [117, 0, 0], [163, 0, 0], [209, 0, 0], [255, 0, 0], [255, 63, 63], [255, 127, 127], [255, 191, 191], [255, 255, 255]], 
  "crimson": [[22, 2, 6], [61, 5, 16], [101, 9, 27], [140, 12, 38], [180, 16, 49], [220, 20, 60], [228, 78, 108], [237, 137, 157], [246, 196, 206], [255, 255, 255]], 
  "orange": [[26, 16, 0], [71, 45, 0], [117, 75, 0], [163, 105, 0], [209, 135, 0], [255, 165, 0], [255, 187, 63], [255, 210, 127], [255, 232, 191], [255, 255, 255]], 
  "gold": [[26, 22, 0], [71, 60, 0], [117, 99, 0], [163, 137, 0], [209, 176, 0], [255, 215, 0], [255, 225, 63], [255, 235, 127], [255, 245, 191], [255, 255, 255]], 
  "yellow": [[26, 26, 0], [71, 71, 0], [117, 117, 0], [163, 163, 0], [209, 209, 0], [255, 255, 0], [255, 255, 63], [255, 255, 127], [255, 255, 191], [255, 255, 255]], 
  "yellow_green": [[15, 20, 5], [42, 57, 14], [70, 94, 23], [98, 131, 32], [126, 168, 41], [154, 205, 50], [179, 217, 101], [204, 230, 152], [229, 242, 203], [255, 255, 255]], 
  "lime": [[0, 26, 0], [0, 71, 0], [0, 117, 0], [0, 163, 0], [0, 209, 0], [0, 255, 0], [63, 255, 63], [127, 255, 127], [191, 255, 191], [255, 255, 255]], 
  "spring_green": [[0, 26, 13], [0, 71, 35], [0, 117, 58], [0, 163, 81], [0, 209, 104], [0, 255, 127], [63, 255, 159], [127, 255, 191], [191, 255, 223], [255, 255, 255]], 
  "forest_green": [[3, 14, 3], [9, 39, 9], [15, 64, 15], [21, 89, 21], [27, 114, 27], [34, 139, 34], [89, 168, 89], [144, 197, 144], [199, 226, 199], [255, 255, 255]], 
  "cyan": [[0, 26, 26], [0, 71, 71], [0, 117, 117], [0, 163, 163], [0, 209, 209], [0, 255, 255], [63, 255, 255], [127, 255, 255], [191, 255, 255], [255, 255, 255]], 
  "deep_sky": [[0, 19, 26], [0, 53, 71], [0, 87, 117], [0, 122, 163], [0, 156, 209], [0, 191, 255], [63, 207, 255], [127, 223, 255], [191, 239, 255], [255, 255, 255]], 
  "dodger": [[3, 14, 26], [8, 40, 71], [13, 66, 117], [19, 92, 163], [24, 118, 209], [30, 144, 255], [86, 171, 255], [142, 199, 255], [198, 227, 255], [255, 255, 255]], 
  "blue": [[0, 0, 26], [0, 0, 71], [0, 0, 117], [0, 0, 163], [0, 0, 209], [0, 0, 255], [63, 63, 255], [127, 127, 255], [191, 191, 255], [255, 255, 255]], 
  "navy": [[0, 0, 13], [0, 0, 36], [0, 0, 59], [0, 0, 82], [0, 0, 105], [0, 0, 128], [63, 63, 159], [127, 127, 191], [191, 191, 223], [255, 255, 255]], 
  "blue_violet": [[14, 4, 23], [38, 11, 63], [63, 19, 104], [88, 27, 144], [113, 35, 185], [138, 43, 226], [167, 96, 233], [196, 149, 240], [225, 202, 247], [255, 255, 255]], 
  "purple": [[13, 0, 13], [36, 0, 36], [59, 0, 59], [82, 0, 82], [105, 0, 105], [128, 0, 128], [159, 63, 159], [191, 127, 191], [223, 191, 223], [255, 255, 255]], 
  "magenta": [[26, 0, 26], [71, 0, 71], [117, 0, 117], [163, 0, 163], [209, 0, 209], [255, 0, 255], [255, 63, 255], [255, 127, 255], [255, 191, 255], [255, 255, 255]], 
  "pink": [[26, 10, 18], [71, 29, 50], [117, 48, 82], [163, 67, 115], [209, 86, 147], [255, 105, 180], [255, 142, 198], [255, 180, 217], [255, 217, 236], [255, 255, 255]], 
  "deep_pink": [[26, 2, 15], [71, 5, 41], [117, 9, 67], [163, 12, 94], [209, 16, 120], [255, 20, 147], [255, 78, 174], [255, 137, 201], [255, 196, 228], [255, 255, 255]],
  "grey": [[13, 13, 13], [36, 36, 36], [59, 59, 59], [82, 82, 82], [105, 105, 105], [128, 128, 128], [159, 159, 159], [191, 191, 191], [223, 223, 223], [255, 255, 255]],
}
  
const space = {
  p: "padding", pl: "padding-left", pr: "padding-right",
  pt: "padding-top", pb: "padding-bottom",
  m: "margin", ml: "margin-left", mr: "margin-right",
  mt: "margin-top", mb: "margin-bottom"
};

const display = {
      'block': "block",
      'inline': "inline",
      'hidden': "none",
      "inline-block": "inline-block",
      "inline-flex": "inline-flex",
      "inline-grid": "inline-grid"
};

const sizes = { sm: "40px", md: "80px", lg: "160px", xl: "320px", xxl: "640px"};
const breakpoints = { sm: 640, md: 768, lg: 1024, xl: 1280, "2xl": 1536 };
const font_sizes = { sm: "0.875rem", md: "1rem", lg: "1.125rem", xl: "1.25rem", xxl: "1.5rem" }; 
const variables = { "black": "#000000", "white": "#ffffff", "transparent": "transparent" }; // Add more variables as needed
const components = {};


module.exports = {
    colors: colors,
    space: space,
    sizes: sizes,
    breakpoints: breakpoints,
    font_sizes: font_sizes,
    components: components,
    display: display,
    variables: variables,
};

Editing the Configuration File

The configuration file is located at twigwind.config.js in the root of your project. You can edit this file to customize various aspects of Twigwind.

Colors

The colors object defines the color palette used by Twigwind.
Each element in each color array is a list of RGB values for the different variants of the color from 1 to 10 so the first element is the 1 (darkest variant) and the last element is 10 (lightest variant).

Spacing

The space object defines the spacing utilities available in Twigwind. You can add or modify properties to create custom spacing utilities.

Sizes

The sizes object defines size utilities for width and height. You can customize these sizes as needed.

Breakpoints

The breakpoints object defines the responsive breakpoints for media queries. You can adjust these values to fit your design requirements.

Font Sizes

The font_sizes object defines the font size utilities. You can customize these sizes to create a typography scale that fits your project.

Variables

The variables object allows you to define custom CSS variables that can be used throughout your project. You can add any variables you need for colors, spacing, or other design tokens. for example:

const variables = {
  "primary": "#007bff",
  "secondary": "#6c757d"
};

You can then call these variables using the @:

<div class="bg-@primary color-@secondary">Content</div>

Components

The components object allows you to define custom components that can be reused throughout your project. Each component can include multiple classes and styles. for example:

const components = {
  "button": [
    "p-10",
    "bg-blue-5",
    "color-white",
    "border-radius-5px",
    "hover:bg-blue-7",        // hover state
    "focus:border-2",         // focus state
    "dark:bg-grey-2",         // dark mode
    "dark:color-grey-9",      // dark mode text
    "lg:p-20"                 // responsive breakpoint
  ],
};

usage:

<div class="button">Button</div>

For runtime usage

In twigwind there is no reliable way to aplly configs in runtime usage. but there are workarounds.

For example you could call the config js file at runtime to overwrite the predefined ones for example.

<script src="/twigwind.config.js"></script> <!-- put this line after the twigwind.js script load tag-->

Configuration Cheat Sheet

A complete reference table for every twigwind.config.js option.

Colors

const colors = {
  // ... existing colors ...
  "brand": [[10,20,40], [20,40,80], [30,60,120], [40,80,160], [50,100,200],
            [60,120,240], [100,150,245], [140,180,250], [190,210,252], [255,255,255]]
};

Spacing

const space = {
  // ... existing keys ...
  px: "padding-left",  // add custom shorthand "px" → padding-left + padding-right
};

Sizes

Breakpoints

Font Sizes

Display

Variables

const variables = {
  "black": "#000000",
  "white": "#ffffff",
  "transparent": "transparent",
  "primary": "#007bff",
  "danger": "#dc3545"
};

Components

const components = {
  "btn": [
    "p-10",                     // padding: 10px
    "bg-blue-5",                // background-color: rgb(0,0,255)
    "color-@white",             // color: #ffffff  (variable)
    "border-radius-5px",        // border-radius: 5px
    "hover:bg-blue-7",          // .btn:hover { background-color: ... }
    "focus:border-2",           // .btn:focus { border: 2px solid; }
    "dark:bg-grey-2",           // .dark .btn { background-color: ... }
    "dark:color-grey-9",        // .dark .btn { color: ... }
    "lg:p-20"                   // @media (min-width:1024px) { .btn { padding:20px } }
  ],
  "card": [
    "p-20",
    "bg-grey-9",
    "border-radius-10px",
    "shadow-md",
    "hover:shadow-lg"
  ]
};

.btn { padding: 10px; }
.btn { background-color: rgb(0, 0, 255); }
.btn { color: #ffffff; }
.btn { border-radius: 5px; }
.btn:hover { background-color: rgb(127, 127, 255); }
.btn:focus { border: 2px solid; }
.dark .btn { background-color: rgb(59, 59, 59); }
.dark .btn { color: rgb(223, 223, 223); }
@media (min-width: 1024px) {
  .btn { padding: 20px; }
}

Supported Prefixes (usable in classes and components)

Note: Only one prefix is supported per class. Chaining (e.g. dark:hover:bg-red) is not supported.

Quick Reference — All Config Keys

Module Exports

The config file must export all keys via module.exports:

module.exports = {
  colors: colors,
  space: space,
  sizes: sizes,
  breakpoints: breakpoints,
  font_sizes: font_sizes,
  components: components,
  display: display,
  variables: variables,
};