Multi-Theme Tailwind 16 exercises

Building an Example All Caps Plugin for Tailwind CSS

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

const plugin = require("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, `addCo

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.