Tailwind Multi-Theme Strategy Workshop (16 exercises)

Building an Example All Caps Plugin for Tailwind CSS

The first step is to import the plugin function from tailwindcss/plugin:

Now we can call this function inside our plugins array. This function gives us another function that allows us to access other functions such as addBase, addComponents, and addUtilities.

Loading solution


0:00 We'll need the plugin function from Tailwind CSS. The first thing I'll do here is const plugin and require tailwindcss/plugin. Then inside of my plugin's array here I can call this plugin function. This function actually gives me another function, which is where I can grab things such as addBase, addComponents, addUtilities. Here we want to add to the base layer, so I'll choose addBase.

0:25 We'll use that helper function to inject styles to the base layer. We want to target the body. Remember it's CSS in JavaScript syntax, textTransform. The value will be a string of uppercase. We can see our styles have been properly injected. The plugin is working.

0:43 That addBase function here is exactly what we're going to use to inject our theme styles -- our CSS variables that we've defined in the previous lessons.