[Tailwind] Transitioning Rounded Corners using the JIT Compiler

Tailwind CSS v2.1 introduces a new just-in-time compiler for Tailwind that generates your styles on-demand as you author your templates, instead of generating everything in advance at initial build time. In this lesson, we'll review how to transition rounded courses using the JIT Compiler.

The code for this lesson is divided into two sections, with this you can see the progress on the code.

            <div
              key={i}
              className="bg-gray-700 hover:bg-brand text-gray-100 hover:text-white rounded-3xl hover:rounded-2xl w-12 h-12 flex justify-center items-center transition-all duration-200"
            >
              <DiscordIcon className="h-5 w-7" />
            </div>

 

tailwind.config.js

module.exports = {
  // These paths are just examples, customize them to match your project structure
  purge: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
  ],
  mode: "jit",
}

 

https://v2.tailwindcss.com/docs/just-in-time-mode