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 it here.

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>

Here are some examples and what they translate into

bg-current	background-color: currentColor;
bg-transparent	background-color: transparent;
bg-black	background-color: rgb(0 0 0);
bg-white	background-color: rgb(255 255 255);
bg-slate-50	background-color: rgb(248 250 252);
bg-slate-200	background-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>

text-current	color: currentColor;
text-transparent	color: transparent;
text-black	color: rgb(0 0 0);
text-white	color: rgb(255 255 255);
text-slate-50	color: rgb(248 250 252);
text-slate-100	color: rgb(241 245 249);

text-xs	font-size: 0.75rem; / 12px / line-height: 1rem; / 16px /
text-sm	font-size: 0.875rem; / 14px / line-height: 1.25rem; / 20px /
text-base	font-size: 1rem; / 16px / line-height: 1.5rem; / 24px /
text-lg	font-size: 1.125rem; / 18px / line-height: 1.75rem; / 28px /

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 a 4-pixel padding around an element.

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

At the same time, you can try adding some margin to the same code above. It should look like this.

<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. TailwindCSS provides a variety of border classes that you can use to customize the borders of your HTML elements.

Here are some example styles that you can use to change the look of the border.

<div className="border-2 border-double">
  <p>Welcome to my website!</p>
</div>

border-solid	border-style: solid;
border-dashed	border-style: dashed;
border-dotted	border-style: dotted;
border-double	border-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>

w-0	width: 0px;
w-px	width: 1px;
w-0.5	width: 0.125rem; / 2px /
w-1	width: 0.25rem; / 4px /
h-0	height: 0px;
h-px	height: 1px;
h-0.5	height: 0.125rem; / 2px /
h-1	height: 0.25rem; / 4px /

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>

flex-1	flex: 1 1 0%;
flex-auto	flex: 1 1 auto;
flex-initial	flex: 0 1 auto;
flex-none	flex: none;

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. By using these basic TailwindCSS classes, you can get started with building your custom user interfaces in no time.

In this URL, you can check all the prebuilt classes available in Tailwind CSS.

Use the following sandbox to try some CSS for yourself.

Just-in-Time Mode

While browsing through above mentioned basic styling utility classes and if you have checked the documentation, you might be thinking, hey Azula, how do I define a custom value? As an 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 (We will talk about this in a future episode) just for one time or two-time use-case scenario.

Also, one downside Tailwind had in its early days was 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 new feature introduced in Tailwind CSS version 2.1. It 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.

Most recent versions of Tailwind come with this mode enabled by default. But if you are working in an environment where this is not enabled by default, here's how to enable it manually.

Go to your tailwind.config.js file and add the following configuration.

// tailwind.config.js
  module.exports = {
   mode: 'jit',
    purge: [
     './public/**/*.html',
     './src/**/*.{js,jsx,ts,tsx,vue}',
   ],
    theme: {
      // ...
    }
    // ...
  }

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>

You can find more information in the official documentation here.

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. If you are using Tailwind CSS version 2.1 or later, I highly recommend giving JIT mode a try.

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!