TailwindCSS

What is Tailwind CSS

Tailwind CSS is a customizable CSS framework. The most important feature of Tailwind CSS is that it prioritizes functionality, similar to bootstrap, Element UI, ANTD, VEUI, etc. Encapsulate some CSS styles to speed up a tool we developed.

TailwindCSS is the lodash of CSS. It is an enhanced utility class. You can write styles as atomic classes and make mixins based on PostCSS as utility functions.

The core concept

Function class preference

Traditionally, developing the following features would write the HTML structure first and then the corresponding CSS styles

<div class="chat-notification"> <div class="chat-notification-logo-wrapper"> <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo"> </div> <div class="chat-notification-content"> <h4 class="chat-notification-title">ChitChat</h4> <p class="chat-notification-message">You have a new message! </p> </div> </div> <style> .chat-notification { display: flex; max-width: 24rem; margin: 0 auto; Padding: 1.5 rem; Border - the radius: 0.5 rem; background-color: #fff; Box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .chat-notification-logo-wrapper { flex-shrink: 0; } .chat-notification-logo { height: 3rem; width: 3rem; }. Chat-notification-content {margin-left: 1.5rem; Padding - top: 0.25 rem; } .chat-notification-title { color: #1a202c; The font - size: 1.25 rem; The line - height: 1.25; } .chat-notification-message { color: #718096; font-size: 1rem; The line - height: 1.5; } </style>Copy the code

With Tailwind, you can style elements by applying pre-existing classes directly to THE HTML.

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4"> <div class="flex-shrink-0">  <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo"> </div> <div> <div class="text-xl font-medium text-black">ChitChat</div> <p class="text-gray-500">You have a new message! </p> </div> </div>Copy the code

This approach allows us to implement a completely custom component design without having to write custom CSS, making the code much simpler

Benefits of functional classes:

• You don’t need to waste your energy naming your classesYou don’t need to pay extra to set some styleswrapperSuch class names do not have to worry about the abstract naming of a function.
• Using the traditional method, the CSS file gets bigger every time you add a new feature. With feature classes, everything is reusable, so you rarely need to write new CSS
• CSS is global and you never know what you might break when you change it. Classes in HTML are native and can be changed at will without worrying about anything else

Responsive design

Use breakpoint syntax to implement @media. Now add a prefix and you’re done. Breakpoint systems are flexible. It is also the best CSS framework to date. For example, if you want to implement a media query, the image width changes according to the screen width

Previously written:

@media only screen and (max-width:1280px) { img { width:196px; } } @media only screen and (max-width: 760px) { img { width:128px; }}Copy the code

But with Tailwind CSS, it can be done in one sentence:

<img class="w-16 md:w-32 lg:w-48" src="..." />
Copy the code

Pseudo classes: hover, focus, and other states

Pseudo-class prefix tags are supported and can be used with reactive

<button
  class="bg-orange-500 hover:bg-orange-600 sm:bg-green-500 sm:hover:bg-green-600"
>
  Hover
</button>
Copy the code

Custom styles

Since tailwind is the most basic framework, the default Utility, base, and Component of tailwind CSS is not sufficient for all scenarios;

Using the @Layer directive, Tailwind automatically moves these styles to the @Tailwind Base, @Tailwind Utility, and @Tailwind Component locations

@layer components { .btn-blue { @apply bg-blue-500 text-white font-bold py-2 px-4 rounded; } .btn-blue:hover { @apply bg-blue-700; }}Copy the code

Tailwind syntactic sugar

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply text-2xl;
  }
}

@layer components {
  .btn {
    @apply bg-gray-500 text-white font-bold;
    @apply py-2 px-4 rounded;
    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
    background-color: theme("colors.blue-500");
  }
}

@layer utilities {
  @variants hover, focus {
    .filter-none {
      filter: none;
    }
  }
  @responsive {
    .bg-opacity-none {
      @apply opacity-0;
    }
  }
}

@screen sm {
  /* ... */
}

.btn-blue {
  background-color: theme('colors.blue.500');
}
Copy the code

• @tailwind: Use the @tailwind directive to insert the base, components, and utilities of tailwind into the CSS.
• @apply: Use @apply to inline any styles into your own custom CSS.
• @Layer: Use the @Layer directive to tell Tailwind to belong to a set of custom styled “blocks”. At base, components, utilities work.
• @variants: You will be able to generate responsive, hover, Focus, active and other pseudoclasses by wrapping their definitions into the @variants directive.
• @responsive: You can generate your own class response by wrapping the definition of class in the @Responsive directive.
• @screen: Use the @screen directive and refer to breakpoints by name, rather than copying their values in your own CSS.
• Theme () : Use the theme() function and. To access your Tailwind configuration values.

Custom Configuration

To customize the configuration, you need to understand the default configuration of tailwindcss

You can extend your own custom configuration items in tailwind.config.js

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
    },
    fontFamily: {
      display: ["Gilroy", "sans-serif"],
      body: ["Graphik", "sans-serif"],
    },
    borderWidth: {
      default: "1px",
      "0": "0",
      "2": "2px",
      "4": "4px",
    },
    extend: {
      colors: {
        cyan: "#9cdbff",
      },
      spacing: {
        "96": "24rem",
        "128": "32rem",
      },
    },
  },
};

Copy the code

There is a specialized set of UI property values

Tailwind CSS does not encapsulate any UI, but some of the attribute values it provides by default are professional. Like colors (professionally produced default palette out of the box)

There are all kinds of inside margins and outside margins, width and height, text size and line height and color. Even if you don’t know anything about design, it’s not too bad to follow the built-in properties.

How does it differ from other CSS frameworks?

CSS has basically gone through three stages.

The first stage, the native writing

It’s kind of like procedural writing in programming, what styles you need, what styles you write in CSS. Programmers who are squeamish about code will do simple CSS reuse. But it is just simple reuse, most of the time or need to write what, how to write how to write.

The second stage is componentization of CSS

Similar to object-oriented programming, the UI of the same vision is encapsulated as a component. A button, for example, is used repeatedly and consistently throughout the project. You can then encapsulate it as a button class. It is OK to use the class name when using it.

This is also how bootstrap, Element UI, ANTD, and VEUI do it.

The advantage of this framework is that it encapsulates a large number of common UIs. So you need a form, you need a navigation, you need a popover, a Card. There are ready-made classes. Just take it and use it, and you can finish it quickly. You don’t need to write CSS at all.

This is the current popular method. In recent years, there are very few projects that are hand-written by themselves, more or less using some CSS framework.

For projects that need to be delivered quickly, this componentized CSS framework is a good fit

The third stage is the componentization of CSS

Also called CSS atomization. It’s similar to the first stage and the second stage above. It’s still a component, but each component is a single-function CSS property.

In the first phase above, we talked about how some people who are interested in code will start to reuse CSS.

For example, float:left is used extensively in pages. Then you can wrap a class like this

.f-left {float:left}
Copy the code

Then, to use float:left, use.f-left.

But when we write our own CSS, just encapsulate some common simple classes, the vast majority of CSS, need to start to write CSS. Let’s say you want to write 12 pixels wide. Width :12px width:12px

Tailwind CSS is a product of phase 3, what does it do?

It encapsulates all CSS properties into semantic classes. If you want a float:left, it already encapsulates it for you. You just use a float-left.

What is the difference between Tailwind CSS and inline styles?

Tailwind CSS writes all styles in a class. Inline styles put all styles inside the style, so many people will have the impression that Tailwind CSS is similar to inline styles.

Tailwind CSS has the following features compared to inline styles:

Design with constraints

With inline style, each value is an arbitrary number. With the Tailwind CSS class, you choose styles from a predefined design system so that your pages are visually consistent and not messy.

Responsive design

You can’t use media queries in inline styles, but Tailwind’s reactive classes make it easy to develop fully responsive interfaces. For example, you can write sm:text-left in class, which means that on a small screen, text is centered in the left. But you can’t do that in inline style.

The modifier

Modifiers such as various pseudo-classes, dark patterns, reactive design, and prefixes are handy

<div class="focus:ring-2 hover:bg-red-700 dark:bg-gray-800"></div>
Copy the code

Tailwind CSS file is very large?

Yes. Because it needs to encapsulate all CSS properties, CSS files are huge. Introducing Tailwind native CSS files directly into a page is not recommended.

Tailwind introduced PurgeCSS when building production files, a tool that, at build time, performs regular matches on code and removes unused atomic classes. This means that the CSS files you end up packing are minuscule, with the average project building CSS file not even exceeding 10K after compression.

When removing unused styles with Tailwind, it’s very hard to end up with more than 10kb of compressed CSS.

Taillwind user’s Guide

Install via NPM

Postcss8 can download the latest version of NPM install -d tailwindcss@latest postcss@latest autoprefixer@latest // Postcss7 can download the compatible version of NPM install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9Copy the code

Creating a Configuration File

Next generate tailwind.config.js and postcss.config.js files:

// Generate base tailwind init -p // generate default tailwind init --fullCopy the code

Introduced Tailwind in CSS

/* ./src/index.css */

/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;
Copy the code

Please make sure to include /*! Due to bugs in Chromium @import */ comments to avoid performance issues in Chrome DevTools at development time. This problem has been fixed in Canary, but has not been released

VSCode completion plug-in

Tailwind CSS IntelliSense

other

• Tailwind CSS V2.0 is starting to drop IE 11 support, if you need to support IE 11, we recommend continuing with Tailwind CSS V1.9
• Tailwind CSS V2.0 no longer supports Node.js 8 or 10. To set up your CSS, you need to make sure that you are running Node.js 12.13.0 or higher in your local and CI environment.

The resources

Tailwindcss website

How to evaluate the CSS framework TailwindCSS

Deep and shallow tailwindCSS