Configure Tailwind CSS

Configure Utility Classes

To edit the default Tailwind CSS configuration go to the Config tab:

Default Config

The Draft plugin ships with a lightweight default configuration that mostly leverages the Tailwind CSS defaults. This is the configuration we use for creating all our block patterns and for building websites. We’ve found this configuration to be lightweight, yet flexible.

There are a few important things you’ll notice:

• colors
  • Colors are added using rgb values, this way we get to leverage all of the opacity utility classes ( That’s what that withOpacityValue function is there for. You can use hex colors but their opacity values won’t get generated. ).
  • Also, note that we are adding these ‘colors’ under the color key, not the ‘extend’ key. Because of this, these colors override all the default Tailwind CSS colors. We do this mainly to speed up the utility class selector interface, otherwise thousands of additional utility classes would get added to a block’s utility class selector.
  • Finally, we use a specific color naming strategy that we also use to create block patterns, page layouts, and eventually full websites. This allows all Draft plugin users to have standardized utility class tokens so you can easily drop in WordPress block patterns and pages while consuming a sites default styles. To learn more about the color naming and how it gets applied check out the colors section below.
• important
  • Important is set to true. We highly recommend doing this as utility classes applied directly to block should be given top priority, just like using inline styles.
• screens
  • Breakpoints are set to use max-width values as we’re assuming most WordPress editing will be done on a laptop or desktop. We also only use 2 breakpoints, sm: for mobile devices and md: for tablets. All utility classes that are added without a breakpoint variant prefix get applied at all device sizes.
• fontFamily
  • Unlike the colors, we’ve placed the fontFamily utilities under the theme > extend key. This way all the default fontFamily utilities get generated as well ( font-sans, font-mono, font serif ). If you want to speed up the utility class selector that gets added to all WordPress blocks, just move these directly under the theme key instead of under extend.
  • Like colors, we also use a set of standardized tokens for fontFamily naming so you can easily drop in WordPress block patterns and pages while consuming a sites default styles. To learn more about the fontFamily naming and how it gets applied check out the fontFamily section below.
• corePlugins
  • Finally, since Draft works with any WordPress plugin or theme, we disable preflight so it doesn’t interfere with any other plugin or theme styling. If you’re using the Draft plugin & theme, you can go ahead and remove this from your config.

Free Plugin Config

var tailwind = !!tailwind ? tailwind : window.tailwind;

tailwind.config = {
    important: true,
    theme: {
        /* max-width responsive breakpoints */
        screens: {
            md: {
                'max': '1023px'
            },
            sm: {
                'max': '767px'
            },
        },
        colors: {
            primary: tailwind.colors.slate['900'],
            secondary: tailwind.colors.white,
            text: 'var(--color-text)',
            accent: tailwind.colors.sky['500'],
            neutral: tailwind.colors.slate,
            transparent: tailwind.colors.transparent,
            current: tailwind.colors.current,
        },
        extend: {
            boxShadow: {
                inset: 'inset 0 1px 0 0 rgb(255 255 255 / 20%)',
            },
            fontFamily: {
                primary: tailwind.defaultConfig.theme.fontFamily.sans,
                secondary: tailwind.defaultConfig.theme.fontFamily.sans,
                text: tailwind.defaultConfig.theme.fontFamily.sans,
                accent: tailwind.defaultConfig.theme.fontFamily.sans,
            },
            listStyleType: {
                circle: 'circle',
                square: 'square',
            },
        },
    },
    corePlugins: {
        preflight: false,
    },
}

Pro Plugin Config

var tailwind = !!tailwind ? tailwind : window.tailwind;

tailwind.config = {
    important: true,
    darkMode: 'class',
    theme: {
        /* max-width responsive breakpoints */
        screens: {
            md: {
                'max': '1023px'
            },
            sm: {
                'max': '767px'
            },
        },
        colors: {
            primary: tailwind.colors.slate['900'],
            secondary: tailwind.colors.white,
            text: 'var(--color-text)',
            accent: tailwind.colors.sky['500'],
            neutral: tailwind.colors.slate,
            transparent: tailwind.colors.transparent,
            current: tailwind.colors.current,
        },
        extend: {
            boxShadow: {
                inset: 'inset 0 1px 0 0 rgb(255 255 255 / 20%)',
            },
            fontFamily: {
                primary: 'var(--font-primary)',
                secondary: 'var(--font-secondary)',
                text: 'var(--font-text)',
                accent: 'var(--font-accent)',
            },
            listStyleType: {
                circle: 'circle',
                square: 'square',
            },
        },
    },
    corePlugins: {
        preflight: false,
    },
}

Colors

The color configuration is an incredibly powerful tool that also drives a handful of utility classes including:

• Background Color ( bg-primary, bg-secondary… )
• Text Color ( text-primary, text-secondary… )
• Border Color ( border-primary, border-secondary… )
• Placeholder Color ( placeholder-primary, placeholder-secondary… )
• Divide Color ( divide-primary, divide-secondary… )
• Ring Color ( ring-primary, ring-secondary… )
• Background Gradient Colors ( from-primary, to-secondary… )

Setting the color defaults is a bit of an art. We’ve given you a handful of context driven color utility tokens, such as Primary, Secondary, Text, & Accent.

When we’re building block patterns, page layouts, and full websites using Draft, this is how we map colors:

• primary – Heading Elements ( h1-h6 )
• secondary – List Items, Subheadings, and Price Table backgrounds
• text – Paragraphs & Menu items
• accent – Links & Button backgrounds

primary	tailwind.colors.slate[‘900’]
secondary	tailwind.colors.white
text	theme(colors.neutral.400) / theme(colors.neutral.500)
accent	tailwind.colors.sky[‘500’]
transparent	transparent
current	current

Font Family

You can also set custom font-family values to use in addition to the default font-family utilities of font-sans, font-serif, font-mono ( font-primary, font-secondary… ).

You have 4 contextual font-family tokens ( primary, secondary, text, accent ), font-family slots that follow a similar naming pattern as the colors.

When we’re building block patterns, page layouts, and full websites using Draft, this is how we map font families ( it’s okay if these tokens use the same font family, we only load a font once regardless of how many times it’s used ):

• primary – Heading Elements ( h1-h6 )
• secondary – List Items, Subheadings, and Price Table backgrounds
• text – Paragraphs & Menu items
• accent – Links & Button backgrounds

primary	ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, “Helvetica Neue”, Arial, “Noto Sans”, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”, “Noto Color Emoji”
secondary	ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, “Helvetica Neue”, Arial, “Noto Sans”, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”, “Noto Color Emoji”
text	ui-serif, Georgia, Cambria, “Times New Roman”, Times, serif
accent	ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, “Helvetica Neue”, Arial, “Noto Sans”, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”, “Noto Color Emoji”