Tailwind css tutorial |  Getting Started with Tailwind CSS – codewithrandom

If you have designed your Website, then you must have realized that it is a very complicated task. The CSS (Cascading Style Sheets) language, which is used to style how HTML documents are displayed, is extensive, complicated, and inconsistent. Moreover, different browsers may have different implementations, that aren’t always compatible.

To ease the design process, there are a variety of CSS frameworks that provide reusable user-interface components for which the styling has been carefully defined and tested. Hence, these frameworks reduce the pain and long cumbersome hours of working with CSS.

However, when you utilize one of these frameworks, it becomes very difficult to differentiate your site from the thousands of other sites that are designed using the same framework.

In this article, we will discuss Tailwind CSS, an alternative to the traditional user interface frameworks. 

What is Tailwind CSS?

Tailwind CSS is a style-agnostic, utility-first, low-level CSS framework that gives you a complete set of cross-browser and reusable utility classes. These classes can be used in your webpage to add your own distinct looks and feel to your website.

I’ve written “Tailwind is utility-first” because rather than using traditional framework classes, it provides low-level utilities that are required to style any HTML element, such as padding, display, width, height, etc.

Tailwind is so simple that once you understand the naming conventions and patterns you can almost guess most of the functionality without needing the documentation.

Who should use Tailwind CSS?

Tailwind isn’t for people who are just getting started with web development ( Say HTML, CSS, or JS ). Anyone interested in learning frontend programming should start with the fundamentals of CSS. Before using any of the CSS frameworks, make sure you’re comfortable with CSS properties.

Now, if you are someone with decent CSS expertise and are looking for a pre-packaged styling solution that will allow you to code less and create a good responsive layout. Then Tailwind CSS is really going to ease your work.

Tailwind CSS is also a great option if you are a team working on large projects. The Tailwind Class selector provides a universal and safe approach to add style to web elements. Moreover, universal class names allow a team to build quickly, consistently, and with less code repetition.

How to install Tailwind to your project?

While there are a number of different ways to set up Tailwind, such as Gulp, postCSS, or even their own CLI. The easiest way to get started is to simply use the CDN URL from unpkg: https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css  

Alternatively, you can install the library into your project using npm or Yarn:

Adding Tailwind to the HTML document

Colors

Colors have the same naming convention for Tailwind’s universal class i.e, element-color-intensity. As a result, a red backdrop is designated as bg-red-500, with a number value ranging from 100 to 900. Borders, backgrounds, and text all follows this pattern.

Size and Spacing

Width and height, abbreviated as w and h, can take values ranging from 0 to 64 (with some missing numbers that you can look up in the docs or with VSCode’s IntelliSense) as well as a few key phrases like auto, full for 100%, or screen for 100vw/vh. We can also give width using fractions out of 1-6 or out of 12, for example, we can write 50% as 1/2, 2/4, 3/6, or 6/12.

Spacing also has a similar naming structure which is property, side (shorthand without dash), then the value ranging from 0 to 64. For instance, padding-bottom: 2rem is written as pb-8. The side can be: t (top), b (bottom), l (left), r (right), x (right and left), or y (top and bottom).

Layout

Many of the benefits of normal CSS positioning, such as floats, position, and even Flexbox, are available in Tailwind. Using them is extremely similar to using them in normal CSS, with the one exception, that with Flexbox, you must initialize it with flex first.

The naming pattern is similar to the pattern used for size, i.e. property-value pattern. For instance, the right float is written as float-right and justify-content: centre; becomes justify-centre.

Typography

Apart from the normal CSS features, Tailwind provides shortcuts for tasks that would otherwise be laborious, such as adding dependencies for our font-family, which we can accomplish with only font-sans, font-serif, or font-mono and have a set of fonts taken care of.

Font-size (reduced to text) uses xs, sm, base, lx, and xl through 6xl instead of the 0-64 units we’ve been using.

Apart from those exclusions, the majority of the text choices in CSS have the same name conventions as before.

Responsiveness

Tailwind particularly shines while designing responsive sites, it reduces the need for media queries. We may limit a class to only work above a certain width using prefixes like sm, md, lg, xl. Whereas the un-prefixed version, like the one we’ve been using so far, works for everything outside of our range.

 

These prefixes represents traditional CSS media queries, where

sm represents @media (min-width: 640px) 

md represents @media (min-width: 768px) 

lg represents @media (min-width: 1024px)

xl represents @media (min-width: 1280px)

2xl represents @media (min-width: 1536px)

 

 

Browser support

To ensure a wide range of browsers and systems renders your site effectively, it’s crucial to understand which browsers Tailwind supports, as well as how to manage any vendor prefixes.

Tailwind CSS supports the latest stable versions of Chrome, Firefox, Edge, and Safari as of the time of writing this post. However, if you’re using an old IE the latest version of Tailwind (v2.0) is not for you, you’ll need to downgrade to v.1.9.

Conclusion

In this article we got introduced to the Tailwind CSS, moreover we also discussed how easy and efficient it is to design your website using Tailwind CSS. To read more and play with the full potential of Tailwind CSS, visit its official documentation.