TWYLED

Theme

This what the theme object looks like:

{
  colors: {},
  spacing: {},
  borderWidth: {},
  borderRadius: {},
  fontSize: {},
  fontFamily: {},
  fontWeight: {},
  lineHeight: {},
  zIndex: {},
  breakpoints: {}
}

Defining the theme

import { createTwyled } from "twyled"

createTwyled({
  colors: {
    primary: "dodgerblue",
    secondary: "limegreen"
  },
  fontSize: {
    small: "0.8rem",
    medium: "1rem",
    large: "1.2rem"
  }
})
ℹ️ Note: You don't have to define every theme slot.

For each theme slot, twyled exports a defaultTheme:

import { createTwyled, defaultColorsTheme, defaultFontSizeTheme } from "twyled"

createTwyled({
  colors: {
    ...defaultColorsTheme,
    primary: "dodgerblue",
    secondary: "limegreen"
  },
  fontSize: {
    ...defaultFontSizeTheme,
    small: "0.8rem",
    medium: "1rem",
    large: "1.2rem"
  }
})

Default theme

The default theme values are all based on Tailwind's default theme.

Colors