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 )

00px
px1px
0.50.125rem
10.25rem
1.50.375rem
20.5rem
2.50.625rem
30.75rem
3.50.875rem
41rem
51.25rem
61.5rem
71.75rem
82rem
92.25rem
102.5rem
112.75rem
11.52.875rem
123rem
143.5rem
164rem
205rem
246rem
287rem
328rem
369rem
4010rem
4411rem
4812rem
5213rem
5614rem
6015rem
6416rem
7218rem
8020rem
9624rem

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

background255,255,255
foreground0,0,0
primary34,34,34
secondary68,68,68
tertiary102,102,102
quaternary0,0,0
quinary0,0,0
senary0,0,0
septenary0,0,0
octonary0,0,0
nonary0,0,0
denary0,0,0
light255,255,255
dark0,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.

headingui-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”
bodyui-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”
primaryui-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”
secondaryui-serif, Georgia, Cambria, “Times New Roman”, Times, serif
tertiaryui-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.

00px
border0.125rem
20.25rem
40.375rem
80.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.

none0px
sm0.125rem
rounded0.25rem
md0.375rem
lg0.5rem
xl0.75rem
2xl1rem
3xl1.5rem
full9999px

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

none0 0 #000000
sm0 1px 2px 0 rgba(0, 0, 0, 0.05)
shadow0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)
md0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)
lg0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)
xl0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)
2xl0 25px 50px -12px rgba(0, 0, 0, 0.25)
innerinset 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… ).

xs0.75rem
sm0.875rem
base1rem
lg1.125rem
xl1.25rem
2xl1.5rem
3xl1.875rem
4xl2.25rem
5xl3rem
6xl3.75rem
7xl4.5rem
8xl6rem
9xl8rem

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-30.75rem
leading-41rem
leading-51.25rem
leading-61.5rem
leading-71.75rem
leading-82rem
leading-92.25rem
leading-102.5rem
leading-none1
leading-tight1.25
leading-snug1.375
leading-normal1.5
leading-relaxed1.625
leading-loose2

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
normal0em
wide0.025em
wider0.05em
widest0.1em