What is Tailwindcss?

"Tailwindcss" is probably something you've heard of, but you might not know what it does or how to use it. In this blog, I'll explain what tailwindcss is, why it's been utilised, and perhaps whether you should use it as a component library. The CSS framework Tailwind CSS calls itself a utility first framework. Tailwind is concentrated around how it should be presented, rather than on the utility of the object being designed.Tailwind CSS is a utility-based first-class framework that uses classes like flex, text-center, pt- 4, and many more to build any design without leaving your HTML code.

Yes, you read that right. Without CSS, you can style and create a design in your HTML code. According to a proverb, all software engineers seek a tool that can implement the 80/20 rule, which states that 80% of work should result in 20% of the output. Hence, evaluating the validity of the rule under tailwind It's important to note that Tailwind won't replace other significant frameworks like Bootstrap and other CSS frameworks. As a result of using utility classes instead of Bootstrap's pre-built components like cards and navigations, Tailwind is actually much more low-level.

Why use TailwindCSS?

More rapid CSS styling

Because Tailwind is the fastest framework for styling HTML, you can quickly produce attractive designs and layouts by directly styling elements. The built-in classes in Tailwind make this possible. Consequently, you are not need to create your own CSS rules. The primary factor in Tailwind's construction and styling speed is its use of CSS classes.

Styling authority

The appearance of your component is not governed by TailwindCSS. Each component or layer is defined by fusing together various utility classes. Tailwind is one of those frameworks that doesn't have an opinion on how you should style your project, so you may, for instance, offer separate sections or divs a different look.

Installation, Configuration, and Usage

We'll examine the two most popular ways to install Tailwindcss. PlayCDN and TailwindCLI

1. Tailwind CLI

To Install tailwind and create tailwind.config.js file we have to make use of npm(Node Package Manager) so if you don't have npm installed you can download it here

// Initialize npm
npm init -y

// In your terminal
npm install tailwindcss

Once it has been set up, let's also launch

npx install tailwindcss init --full

By using the Tailwind CLI utility located in your root directory, this will create a Tailwind configuration file for your project. Why? Since you can specify any adjustments in an optional tailwind.config.js file located at the project's root, Tailwind will by default search for that file.

tailwindcss.config.js You should see something like this in your config file... but it should be more than 900lines 😅

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

For Editor Setup You can refer here

2. Tailwind CDN

It's really easy to complete this procedure; all you have to do is add the tailwind CDN script tag to your index.html's head tag and tailwind will launch directly in the browser without the need for a build step.

Tailwind Utilities

There are many other useful tools you may utilise, and you can learn more about them on the official Tailwind site. These are some of my personal favourites that I use in most of my projects.

flex = display: flex.
justify-center = justify-content: center.
mt-10 = margin-top: 2.5rem
px-10 = { padding-left: 2.5rem/ 40px /; padding-right: 2.5rem/ 40px /; }
items-center = align-items: center
text-xl = font-size: 1.25rem
md:text-xl = md means medium size.
font-mono = font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
hover:bg-red-600 = applies a background color of red
hover:text-white = applies a color of white on hover
underline = text-decoration: underline
font-bold= font-weight: bold

What is utility-first-css design principle?

By effectively transferring the declaration of CSS properties from the CSS file to the html markup, the utility-first-css technique produces bloated html.

Pre-defined classnames are included directly in html markup, just like inline-styles, in utility-first CSS design.

The utility-first CSS strategy is the foundation of Tailwindcss, which offers pre-defined utility classes to design websites.
Additionally, you can develop your own useful CSS design system.
Each class in this technique must have certain CSS properties in order to adhere to the utility CSS method.
The sole drawback of the utility-css approach is that it violates the separation of concerns principle because utility css must be placed directly in html elments, making your html appear very crowded and verbose.
You'll experience some trepidation while using tailwindcss for the first time because of the habitual use of the standard css technique we developed. Although tailwindcss utility classes look like inline styles, they have a number of advantages over inline styles, including responsive design, variation states (such hover and focus), and consistent pre-defined classes.

Isn't this just inline styles, I get the question a lot when using this technique. In some ways, it's because you're styling things directly rather than first giving them a class name.But compared to inline-styles, using tailwindcss utility pre-defined classes offers little advantages.

Below is a discussion of a few of them:

Design Consistency: The utility CSS technique makes it simple to create consistent user interfaces by applying styles from a specified CSS design system. The values in inline-styles are all distinct.
Media queries are not supported by inline styles, but Tailwind's responsive tools make it simple to design completely responsive interfaces.
CSS states such as focus, before, after, and so forth: Although states like hover and attention cannot be targeted by inline styles, Tailwind's state variations make it straightforward to style such states using utility classes.

Features of TailwindCSS

1.Pre-defined utility classes hub: By default tailwindcss provides pre-defined utiliy css from it's API.They make it simple to follow a well-engineered design system's guidelines for color selection, spacing, font, shadows, and other elements.

2.Easy to customize: Tailwind does not encourage you to create the same compoents or site more than once because it is so low-level. It's simple to construct the same component with an entirely different look in the next project, even with the same color scheme and scaling scale.

3.The performance is great because it uses JIT(Just-in-Time) engine under the hood.

4.Responsive Design: You can practically put a screen size in front of any utility class and watch it suddenly take effect at a certain breakpoint.

Cons of TailwindCSS

Utility CSS oppose the separation of concern practice: We use tailwindcss utility classes directly in html elements, as opposed to the Separation of concerns practice.
HTML bloat: The one-to-one mapping between elements and classes is done using the conventional CSS technique. One html element class can have several CSS properties applied, whereas with a CSS utility style like tailwindcss, we construct one class for specific properties like margin-top will have a specific class, and margin-right will have a specific class.Each individual css properties will have specific class name. In effect, all you are doing is shifting the definition of CSS properties from the CSS file to the HTML file, which causes bloat in the HTML.
Large HTML size: Adding more text to an HTML document increases the file's weight. We put a lot of pre-defined utility CSS class names into html elements with tailwindcss, resulting in a larger html file size, which can impact your core web vital performance.
No support for Web Components: TailwindCSS does not officially support web components like Shadow DOM. There has been some testing to see if it can be made to function with web components, but nothing significant enough to state that it does.

Responsive Design

Bootstrap-like responsive design breakpoints are used by Tailwind. It means that the desktop first approach only works up to a specified breakpoint and not above, whereas the utility CSS only affects at the specific breakpoints & above.

Mobile first method code:

@media all and (min-width: 768px) {
              p {
                background-color: yellow;
                color: white;
              }
            }

Desktop first method code:

@media all and (max-width: 768px) {
              p {
                background-color: yellow;
                color: white;
              }
            }

TailwindCSS Breakpoints:

How to use tailwindcss breakpoint?

add the breakpoint prefix sm infront of utility class followed by the : character

Example:


<p class="text-base xl:text-lg lg:italic">Responsive design approach in Tailwindcss</p>

Any utilities you introduce at a lesser breakpoint will also be implemented at larger breakpoints because Tailwind's breakpoints only have a min-width and no max-width.

However, if there is a utility that you only wish to use at one breakpoint, you can reverse it at greater sizes by using a different utility that forbids it.

Brijesh Vadaliya's Blog