Tailwind Config
Run locally for transcripts
๐ฆ Tailwind has a fantastic ๐ default theme โ you can build a surprisingly large number of project without ever deviating at all from those defaults.
In this particular workshop design though, there are a few new design values that land outside of Tailwind's defaults.
Tailwind theme customisation
๐จโ๐ผ The Figma design contains a handful of traits that are not part of the default Tailwind theme. They were kind enough to communicate some of these custom values in Figma, so make sure you honour that by transposing all those custom values to the Tailwind theme:
- a custom font family called Poppins (Google font)
- custom min-widths for the
sm(520px) andlg(976px) breakpoints - custom
4.5xland5.5xlfont sizes for the heading tag - a custom
highlightcolor of#6202FF
๐งโโ๏ธ I went ahead and added the necessary Google Font tags in for the Poppins font. It's ready to be wired with Tailwind!
Time to get to work
In Tailwind CSS v4, the theme configuration will be moving to a CSS file
instead. At the time of this workshop, it's just too early (and experimental)
to go with v4, so we're sticking with the JS config.
In the last exercise of this workshop, we'll convert our entire project to
Tailwind v4, so you can also learn the new config and prepare for when v4
ships!
๐ฐ Tip: make sure you include the
index.html file in the Tailwind config's ๐ content array, since it's now using Tailwind classes!