How to
Configure TailwindCSS
The Draft Pro plugin comes armed with a complete DESIGN SYSTEM that you can configure to fit your needs. Ultimately, this gives you the ability to quickly build beautiful and cohesive sites by applying consistent and on-brand styling.
The default design system comes loaded with amazing, and sensible, defaults defined by the TailwindCSS team.
From the plugin settings, you can modify the underlying default values of many of the most important TailwindCSS utility classes.
Configure Utility Classes
Below are all the configurable settings available to you and their default values.
To edit these in the Draft Pro plugin, you can either:
Click into any block > Go to Advanced in the sidebar > Click Edit Default Settings
Or:
Click the 3 dots > Go to Draft Plugin Settings
Go to Configure TailwindCSS
Spacing
Many of the most important utility classes are powered by the spacing configuration:
- Padding
- Margin
- Inset
- Width
- Height
- Max Height
- Gap
- Space
- Translate
In the table below are the default values. You can apply sizing in whatever unit you would like ( px, rem, em, etc )
| 0 | 0px |
| px | 1px |
| 0.5 | 0.125rem |
| 1 | 0.25rem |
| 1.5 | 0.375rem |
| 2 | 0.5rem |
| 2.5 | 0.625rem |
| 3 | 0.75rem |
| 3.5 | 0.875rem |
| 4 | 1rem |
| 5 | 1.25rem |
| 6 | 1.5rem |
| 7 | 1.75rem |
| 8 | 2rem |
| 9 | 2.25rem |
| 10 | 2.5rem |
| 11 | 2.75rem |
| 11.5 | 2.875rem |
| 12 | 3rem |
| 14 | 3.5rem |
| 16 | 4rem |
| 20 | 5rem |
| 24 | 6rem |
| 28 | 7rem |
| 32 | 8rem |
| 36 | 9rem |
| 40 | 10rem |
| 44 | 11rem |
| 48 | 12rem |
| 52 | 13rem |
| 56 | 14rem |
| 60 | 15rem |
| 64 | 16rem |
| 72 | 18rem |
| 80 | 20rem |
| 96 | 24rem |
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 names, such as Background, Foreground, Primary, Secondary, Light & Dark.
We’ve also added 6 additional custom color utility slots that sequentially follow the naming pattern of Primary 1st and Secondary 2nd ( tertiary 3rd, quaternary 4th, quinary 5th, senary 6th, septenary 7th, octonary 8th, nonary 9th, denary 10th ).
Color variables require RGB values ( at some point we’ll add a color selector that converts this automatically ). In order to get certain TailwindCSS utilities to work, such as bg-opacity or text-opacity, RGB values are required.
You can easily convert hex colors ( #000000 ) to RGB values ( 0,0,0 ) using an online tool like this: https://www.rapidtables.com/convert/color/hex-to-rgb.html
| background | 255,255,255 |
| foreground | 0,0,0 |
| primary | 34,34,34 |
| secondary | 68,68,68 |
| tertiary | 102,102,102 |
| quaternary | 0,0,0 |
| quinary | 0,0,0 |
| senary | 0,0,0 |
| septenary | 0,0,0 |
| octonary | 0,0,0 |
| nonary | 0,0,0 |
| denary | 0,0,0 |
| light | 255,255,255 |
| dark | 0,0,0 |
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 2 contextual font-family utilities ( heading & Body ) and 3 custom font-family slots that follow a similar naming pattern as the colors, sequentially following the naming pattern of primary (1st) and secondary (2nd), and tertiary (3rd).
If you need more let us know, but you probably shouldn’t be using more than 2 to 3 font families max…
There is a caveat to the font configuration settings. The font-family that you use needs to be available on your site, such as through a plugin or theme. We have integrated all of the Google fonts so you should have a good head start.
| heading | 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” |
| body | 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” |
| 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-serif, Georgia, Cambria, “Times New Roman”, Times, serif |
| tertiary | 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” |
Border Width
You have 5 configurable Border Width settings. Again, you can use any unit you like ( px, em, rem… ).
The Border Width settings are used by all of the border utility classes such as border-0, border, border-2, border-r-8, border-b-0.
| 0 | 0px |
| border | 0.125rem |
| 2 | 0.25rem |
| 4 | 0.375rem |
| 8 | 0.5rem |
Border Radius
You can override the default TailwindCSS Border Radius values.
The Border Radius values are used by utilities such as rounded, rounded-none, rounded-tr-xl, rounded-bl-2xl, etc.
| none | 0px |
| sm | 0.125rem |
| rounded | 0.25rem |
| md | 0.375rem |
| lg | 0.5rem |
| xl | 0.75rem |
| 2xl | 1rem |
| 3xl | 1.5rem |
| full | 9999px |
Box Shadow
If you like adding unique Box Shadows to your website, you can configure all the box-shadow utilities here. All the default TailwindCSS values come loaded and as you can see you can stack box-shadow values by separating them with commas.
The Box Shadow configuration powers the shadow utilities such as shadow-none, shadow-sm, shadow, shadow-2xl, etc.
Want to get crazy? Try dropping in a CSS color variable generated by the Draft Pro plugin to make your box-shadow colors on-brand. This would look something like: 0 1px 2px 0 rgba( var(--tw-color-primary), 0.05).
| none | 0 0 #000000 |
| sm | 0 1px 2px 0 rgba(0, 0, 0, 0.05) |
| shadow | 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) |
| md | 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) |
| lg | 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) |
| xl | 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) |
| 2xl | 0 25px 50px -12px rgba(0, 0, 0, 0.25) |
| inner | inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) |
Font Size
Customize all of the Font Size utilities. These are used by utilities such as text-xs, text-sm, text-base, text-4xl, etc.
Again, you can use any unit you like ( px, em, rem… ).
| xs | 0.75rem |
| sm | 0.875rem |
| base | 1rem |
| lg | 1.125rem |
| xl | 1.25rem |
| 2xl | 1.5rem |
| 3xl | 1.875rem |
| 4xl | 2.25rem |
| 5xl | 3rem |
| 6xl | 3.75rem |
| 7xl | 4.5rem |
| 8xl | 6rem |
| 9xl | 8rem |
Line Height
You have complete control over all of the Line Height settings. Once again, say it with me, you can use any unit you like ( px, em, rem… ).
This is used by all the Line Height utilities such as leading-none, leading-3, leading-snug, leading-loose, etc.
Did you know? The word “leading” comes from the days when printed materials were created with hot metal presses and lead blocks of varying thicknesses were used to create space between lines of text. Now that’s hot!
| leading-3 | 0.75rem |
| leading-4 | 1rem |
| leading-5 | 1.25rem |
| leading-6 | 1.5rem |
| leading-7 | 1.75rem |
| leading-8 | 2rem |
| leading-9 | 2.25rem |
| leading-10 | 2.5rem |
| leading-none | 1 |
| leading-tight | 1.25 |
| leading-snug | 1.375 |
| leading-normal | 1.5 |
| leading-relaxed | 1.625 |
| leading-loose | 2 |
Letter Spacing
Finally, you can configure the Letter Spacing utilities. These are used by classes such as tracking-tight, tracking-none, tracking-tighter, etc. Once more, you can use any unit you like ( px, em, rem… ).
Use tracking to change the overall appearance and readability of the text, making it more open and airy or condensing it for a special effect.
| tighter | -0.05em |
| tight | -0.025em |
| normal | 0em |
| wide | 0.025em |
| wider | 0.05em |
| widest | 0.1em |