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]], 
    orange: [[26, 13, 0], [71, 35, 0], [117, 58, 0], [163, 81, 0], [209, 104, 0], [255, 127, 0], [255, 159, 63], [255, 191, 127], [255, 223, 191], [255, 255, 255]], 
    amber: [[25, 17, 0], [70, 48, 0], [115, 79, 0], [161, 110, 0], [206, 141, 0], [252, 173, 0], [252, 193, 63], [253, 214, 127], [254, 234, 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]], 
    lime: [[13, 26, 0], [35, 71, 0], [58, 117, 0], [81, 163, 0], [104, 209, 0], [127, 255, 0], [159, 255, 63], [191, 255, 127], [223, 255, 191], [255, 255, 255]], 
    green: [[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: [[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]], 
    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]], 
    sky: [[0, 17, 25], [0, 48, 70], [0, 79, 115], [0, 110, 161], [0, 141, 206], [0, 172, 252], [63, 192, 252], [127, 213, 253], [191, 234, 254], [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]], 
    indigo: [[8, 0, 13], [21, 0, 36], [34, 0, 59], [48, 0, 83], [61, 0, 106], [75, 0, 130], [120, 63, 161], [165, 127, 192], [210, 191, 223], [255, 255, 255]], 
    violet: [[15, 0, 21], [41, 0, 59], [68, 0, 97], [94, 0, 135], [121, 0, 173], [148, 0, 211], [174, 63, 222], [201, 127, 233], [228, 191, 244], [255, 255, 255]], 
    grey: [[1, 1, 1], [2, 2, 2], [4, 4, 4], [6, 6, 6], [8, 8, 8], [10, 10, 10], [71, 71, 71], [132, 132, 132], [193, 193, 193], [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 sizes = { sm: "40px", md: "80px", lg: "160px", xl: "320px", xxl: "640px"};
const breakpoints = { sm: 640, md: 768, lg: 1024, xl: 1280, "2xl": 1536 };

const components = {};

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

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.

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 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-->