Options
All
  • Public
  • Public/Protected
  • All
Menu

Applying a new theme or extending the default is probably the most common customization. For maximum compatibility and ease of adoption, theming in Twind works exactly the same as theming in Tailwind.

Here is an example of overriding and extending values in the theme:

import { setup } from 'twind'

setup({
  theme: {
    fontFamily: {
      sans: ['Helvetica', 'sans-serif'],
      serif: ['Times', 'serif'],
    },
    extend: {
      spacing: {
        128: '32rem',
        144: '36rem',
      },
    },
  },
})

Colors

The Tailwind v2 extended color palette is available as twind/colors:

import * as colors from 'twind/colors'

setup({
  theme: {
    colors: {
      // Build your palette here
      gray: colors.trueGray,
      red: colors.red,
      blue: colors.lightBlue,
      yellow: colors.amber,
    },
  },
})

To extend the existing color palette use theme.extend:

import * as colors from 'twind/colors'

setup({
  theme: {
    extend: {
      colors,
    },
  },
})

Referencing other values

If you need to reference another value in your theme, you can do so by providing a closure instead of a static value. The closure will receive a theme() function that you can use to look up other values in your theme.

setup({
  theme: {
    fill: (theme) => theme('colors'),
  },
})

Continue to Tailwind Extensions

Generated using TypeDoc