Contact Us:
07002007332
CheapDeveloper
CheapDeveloper » Webmaster » Articles » Overview of the Tailwind SS framework: What is TailwindCSS used for?

Overview of the Tailwind SS framework: What is TailwindCSS used for?

22 November 2021, Monday By M. Konwar
128
0

Let's talk about a promising but highly controversial CSS framework. 

What is TailwindCSS?

TailwindCSS is an increasingly popular CSS framework that allows you to make changes to the design of sites and applications without leaving the HTML markup (both in the corresponding files and in components such as React or Svelte) and without using the <style> tag.

The idea is to style the styles directly into the class directive, not under the selectors in the CSS file. It looks like this:

<div class="flex justify-center font-bold text-red-400">Header</div>

Technically, this is similar to using inline classes, when you describe the design of an element within its tag. For example, like this:

<div style="display: flex; justify-content: center; font-weight: 700; color: rgba(248, 113, 113, var(--tw-text-opacity));>Header</div>

But as you can see, in the case of inline styles, the code becomes much larger, harder to read and difficult to configure. Tailwind solves this and many other problems by making it easier to style content in your applications. 

How does TailwindCSS work?

Let's dwell a little on how Tailwind works from a technical point of view. I note right away that there is no magic in this framework. It doesn't make low-level critical changes and doesn't (or rather, it doesn't) convert its own syntax to standard CSS.

Tailwind is based on all the same classes and selectors, only on a large scale and with pre-prepared interaction rules. Yes, any property in Tailwind is a class. This is how it looks when converted to CSS.

First the Tailwind code:

<div class="flex justify-center flex-col border text-blue-200>CheapDeveloper</div>

Then the CSS:

.flex \{ display: flex; }

.justify-center \{ justify-content: center; }

.flex-col \{ flex-direction: column; }

.border \{ border: 1px black solid; }

.text-blue-200 \{ --tw-text-opacity: 1; rgba(191, 219, 254, var(--tw-text-opacity)); }

No black magic. Just a little trick. Each Tailwind class is a separate CSS selector.

For this reason, there are quite a few opponents of Tailwind who actively defend CSS inline variables. Like, the idea is the same, only the syntax is also incomprehensible. But this is already a matter of taste. Different approaches to styling pages have their pros and cons.

What is TailwindCSS used for?

The creator of Tailwind wrote a huge article on this topic back in 2017. And this is not just graphomania for marketing purposes, but a serious breakdown of why the current semantic class system makes it difficult to maintain CSS code. 

Now the styling of sites and applications looks like this:

  • You are creating an HTML document or conditional React component.
  • You describe the structure of something in the created file, adding for each element a certain class through which it can be found.
  • Then you include the CSS file and write the styles inside it, relying on the selectors (previously indicated classes) and using the classic CSS syntax.

With Tailwind, you don't have to create a new file, write something in parallel and invent classes. You can directly write the name of the styles instead of the semantic class.

Instead of this:

CSS

It will be like this:

TailwindCSS

TailwindCSS changes the way you work with styles, implement responsive layouts, style your code, and create your own design systems. This is not a panacea, but thousands of developers have already appreciated the capabilities of Tailwind in their projects and received a noticeable boost to performance, coupled with a noticeably reduced number of nervous breakdowns on the basis of analyzing CSS markup. 

Here, no matter how trite it may sound, you have to try everything yourself. You may not be able to look at CSS differently anymore. Or still continue to structure the branching BEM markup or style the pages with mixins in Saas or Stylus.

How do I install and configure TailwindCSS?

Depending on which stack you are using, the installation of Tailwind may look different. For example, to implement a CSS framework in Svelte, you only need to enter one command:

npx svelte-add tailwindcss

But in the case of React or bare jаvascript, you will have to enter a little more commands. First you need to install the dependencies - among them PostCSS and Autoprefixer. Tailwind will work as a plugin for PostCSS:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Then you need to change the contents of the postcss.config.js configuration file:

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

After that, create a config file for Tailwind (base):

npx tailwindcss init

In an existing CSS file, add:

/* ./your-css-folder/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

That's enough to get you started with CSS in jаvascript. In the case of frameworks like React or Vue, you will have to install additional utilities for configuration, but nothing critical. This is described in detail and intelligibly on the official Tailwind website.

Main features of TailwindCSS

It will not be possible to cover all the classes available in TailwindCSS in one article, and why, if there is complete documentation. Let's go over the basics and, in the form of a mini-guide, consider the main features of the framework. I think this will be enough for the first acquaintance. 

So, let's say you set up your development environment and open a markup file (jаvascript component or HTML file). Let's start styling our code. 

Base classes for page decoration

Tailwind has a basic configuration file, and by default it includes a large collection of classes needed to style the application. 

There are flex, grid, block classes for quickly changing the display property. There are companion classes like justify-center and items-center. You can also adjust padding and padding: m-10 instead of margin: 40px or p-5 instead of padding: 20px. There are options for minus margins: -m-2 or -p-2. It is also possible to choose a specific direction for the padding mb-5 instead of margin-bottom: 20px or py-10 instead of padding: 40px 0px

A large color palette is built into the framework. The colors here have the usual names and postfix with saturation in the digital designation. For example, there is a dull pink red-50 and a rich, almost burgundy red-900

TailwindCSS

You will also see a lot of acronyms here like sm, md, xl, etc. They often refer to the height and width of objects, but sometimes apply to shadows as well. For example, the most subtle shadow in TailwindCSS is shadow-sm. In any case, you will have to add your colors as variables through the configuration file.

You can check the values ​​of the base classes on the Tailwind Play website. But it's not a fact that you will need it, because modern IDEs like VSCode and JetBrains support TailwindCSS by default. Tailwind Play will be needed by users of Sublime Text and other less common text editors. 

Advanced CSS properties

It doesn't end at the base. Tailwind supports rarer and more advanced properties: animations, border radius, transform properties, letter-spacing, and the like. 

True, all this is available in limited form. For example, there are only 4 animations by default:

  • animate-spin - makes the object spin on its axis.
  • animate-pulse - makes the object pulsate.
  • animate-ping - forcing the object to "jump out" at the user.
  • animate-bounce - makes the element bounce.

These are the 4 most common animation options. But no one bothers you to add as many of your own as you like.

Responsive layout, states and pseudo-selectors

Tailwind supports media queries and pseudo-selectors out of the box (though not all). By default, there are all popular screen resolutions, and they are hidden behind the letter combinations sm, md, lg, etc. 

sm, for example, turns into a media query: 

@media (min-width: 640px)

There are basic selectors :hover, :active A, :before and :after. There are no abbreviations for them, they are written in the classes that way. It looks like this:

<div class="text-red-200 w-20 hover:text-red-300 lg:w-44">Hello</div>

This object changes its color when you hover over it, and also grows in size on large screens (in our case, with a resolution greater than 1024px).

One more example:

<div class="before:content-['CheapDeveloper']">News</div>

Rarer first-letter events are also supported. You can style the first character separately from other text elements:

<p class="first-letter:text-2xl">Kakoy-to text</p>

Variables

In addition to classes, TailwindCSS also has variables similar to those used in CSS preprocessors. With the help of them, you can put several classes into one and use it as a classic semantic selector. This is done using the @apply directive.

If you write this in your CSS file...

.test {@apply text-blue-200 mx-2 my-4 rounded-full}

... we will get a new selector .test that can be attached as a class to any HTML element, and this element will inherit all the properties written after the @apply directive. 

Such variables can be used as mixins and embedded in other selectors:

.test {
color: red;
}
.anotherTest {
@apply test;
}

anotherTest will inherit the properties of test.

This approach is useful in cases where you, instead of component frameworks, use the classic layout and face a lot of duplicate classes. Yes, part of the concept of Tailwind is lost, and you have to re-write the styles in a separate file, but you still retain the ability to use more understandable and convenient properties like flex, font-bold, mx, etc. 

Adding your own classes 

Tailwind can be customized to your taste (or to the taste of the designer who created the layout of the site being developed). To do this, you need to register new properties in the framework configuration file. 

For example, to add new values ​​to the margins, padding and other properties that are responsible for the spacing between HTML elements, you need to inscribe a spacing object with the desired indicators:

module.exports = {
theme: {
  extend: {
   spacing: {
    '2/20': '10%',
    '4/20': '20%',
   },
  },
},
}

After that, you can add to the list of classes

m-2/20 

or 

py-4/20

The same goes for colors and other properties. A complete list is available in the official documentation.

In most cases, you will start new projects by adding your own classes based on the designer's layout.

TailwindUI

In addition to the framework itself, the developers have created a collection of ready-made elements based on Tailwind, which can be added to your site and used as a template for further development of the site or application. 

TailwindUI

TailwindUI has forks HeadlessUI and DaisyUI. The principle is the same. For a small fee, you get access to ready-made components and can assemble a full-fledged website or program with a responsive design from them. 

It's like using WordPress, but without a pile of unnecessary code and with its own programming logic. 

Alternative frameworks with a similar idea

Tailwind has several competitors with similar principles.

  • Tachyons.io - follows the same logic, but offers a narrower set of predefined classes. The focus is on extremely short class names, which is why Tachyons abounds in abbreviations.
  • Basscss is a simplified version of Tailwind that helps you quickly place elements on a page without resorting to standard CSS properties.
  • Beard is the most modest analogue of Tailwind, but with the ability to add properties through predefined functions. 

Instead of a conclusion

TailwindCSS is a popular framework, is featured prominently in front-end developer jobs, and is very easy to learn. Even if you don't have problems styling your apps, it's still worth adding new technology to your portfolio.

Hope this helps you early and inspires you to work with Tailwind.

Discuss
Add a comment
Comments (0)
Comment
Partners