Effortlessly Build Modern UIs with React and TailwindCSS: A Complete Guide - Part 2

Effortlessly Build Modern UIs with React and TailwindCSS: A Complete Guide - Part 2

In the last episode, we talked about how to integrate TailwindCSS into our brand-new or existing React project. If you missed it, read the first part.

Today we are going to discuss basic styling methods present in TailwindCSS. This episode will cover the following criteria:

  • Basic TailwindCSS classes for styling
  • Just-in-Time Mode

Basic TailwindCSS classes for styling

So, what are some of the basic Tailwind CSS classes that you can use to style your website?

Background Colors

You can use background classes to style the background of your website’s elements. For example, you can use the bg-blue-500 class to set the background color to a blue shade.

<div className="bg-blue-500">
  <h1>Welcome to my website!</h1>
</div>
ClassCSS
bg-currentbackground-color: currentColor;
bg-transparentbackground-color: transparent;
bg-blackbackground-color: rgb(0 0 0);
bg-whitebackground-color: rgb(255 255 255);
bg-slate-50background-color: rgb(248 250 252);
bg-slate-200background-color: rgb(226 232 240);

Text Classes

TailwindCSS provides a variety of text classes that you can use to style your website’s text. For example, you can use the text-gray-500 class to set the color of your text to a light gray shade. You can also use the text-xl class to set the font size to extra large.

<p className="text-gray-500 text-xl">Welcome to my website!</p>

Padding and Margin Classes

Padding and margin classes are used to add space around your website’s elements. For example, you can use the p-4 class to add padding around an element.

<div className="p-4">
  <p>Welcome to my website!</p>
</div>

You can also combine padding with margin:

<div className="p-4 m-2">
  <p>Welcome to my website!</p>
</div>

Border Classes

You can add borders to an HTML element by using the border class followed by the border size and border color. For example, if you want to add a 1-pixel border with a gray color, you can use the border border-gray-500 class.

<div className="border-2 border-double">
  <p>Welcome to my website!</p>
</div>
ClassCSS
border-solidborder-style: solid;
border-dashedborder-style: dashed;
border-dottedborder-style: dotted;
border-doubleborder-style: double;

Width and Height Classes

You can use width and height classes to set the size of your website’s elements. For example, you can use the w-64 class to set the width of an element to 64 rem and the h-32 class to set the height of an element to 32 rem.

<div className="w-64 h-32 bg-blue-500">
  <p>Welcome to my website!</p>
</div>

Flexbox Classes

TailwindCSS provides a variety of flexbox classes that you can use to create flexible layouts. For example, if you want to make an element a flex container, you can use the flex class. If you want to center an element horizontally and vertically, you can use the flex items-center justify-center classes.

<div className="flex justify-center">
  <p>Welcome to my website!</p>
</div>

In conclusion, TailwindCSS provides a wide range of pre-built classes that you can use to style your HTML elements. These classes are designed to be easy to use and customize, making it easy to create beautiful and responsive web pages.

Just-in-Time Mode

While browsing through the basic styling utility classes, you might be thinking: “Azula, how do I define a custom value?” For example, if you want to set the width of a div to exactly 530px, there are no utility classes for that. At the same time, you certainly don’t want to add a custom utility class in Tailwind just for one or two-time use case scenario.

Also, one downside Tailwind had in its early days was that it had a lot of pre-defined utility classes that make it easy to style HTML elements quickly without having to write custom CSS. But sometimes, all those classes can make your CSS files big, which can make your website slow and sluggish.

This is where the Just-In-Time (JIT) mode in Tailwind CSS can help you out.

JIT mode is a feature in Tailwind CSS that compiles your CSS on-demand, meaning that it only includes the CSS classes that you use in your HTML file. This results in a smaller CSS file size and faster load times for your website.

Enabling JIT Mode

To enable JIT mode in your tailwind.config.js file, update your configuration like this:

module.exports = {
  mode: "jit",
  purge: ["./src/**/*.{js,jsx,ts,tsx}"],
  // ...
}

Once you enable it successfully, try some of the following examples and see if they work for you.

<div className='h-[calc(1000px-4rem)]'>
  <p className='p-[12px]'> Hi JIT </p>
</div>

JIT mode also allows you to take advantage of new features and updates in Tailwind CSS more quickly. Since the compiler only generates the CSS that you actually use, you can start using new classes and features as soon as they are released, without needing to update your configuration file.

In conclusion, JIT mode is a powerful feature in Tailwind CSS that can help you optimize the performance of your website or application. By reducing the size of your CSS file and enabling dynamic classes, it allows you to take advantage of the full potential of Tailwind CSS.

In the next episode, let’s talk about how to build some components such as forms, icons, backgrounds, etc with some real-world examples with advanced styling classes.

If you have any questions feel free to ask in the comments section. Let’s catch you in the next one. Peace!