Bootstrap to Tailwind (waited too long)

Exploring Tailwind CSS has been quite an adventure. I’ve been a loyal user of Bootstrap from its version 3 all the way up to 5, even navigating through the upgrades of several sites. We began with version 3, moved on to 4, and eventually upgraded to 5. The transition from 4 to 5 was notably smoother.

Tailwind introduces the concept of utility classes, a feature somewhat present in Bootstrap but with a significant twist. The unique aspect of Tailwind is its compiler, or bundler, which scans your project files to identify the classes you’ve used. It then generates only the necessary CSS, a stark contrast to Bootstrap, where you end up with the entire CSS unless you manually select specific components via SCSS.

Another key feature is the tailwind.config.js file, which leverages the power of JavaScript to customize aspects of your CSS. For example, you can override the theme color or include plugins. Modifying the tailwind.config.js, especially in the theme section, instructs Tailwind to generate utility classes based on your specifications. For instance:

theme: {
  extend: {
    colors: {
      'mycolor': {
        50: 'var(--mycolor-50)',
      }
    }
  }
}

This setup enables the use of classes like text-mycolor-50 in your HTML. Such classes apply the color defined by the --mycolor-50 CSS variable to the text of an element.

To define --mycolor-50, you would include it in the index.css file that incorporates Tailwind directives, as shown below:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --mycolor-50: #fee6ef;
  }
}

This configuration demonstrates the flexibility and efficiency of Tailwind CSS, allowing for a more tailored and optimized approach to styling web projects.

Please note that this is a running blog and will be updated as I delve deeper into Tailwind CSS and discover more about its capabilities and features.