Author: Kang Zenglu

background

Tailwind is a CSS framework based on the Atomic/Utility-First specification that provides basic Utility classes (e.g. Default classes such as padding, text and font, and Transition for animation) can be combined directly in scripting markup language to build the design you want.

Currently, the mainstream UI frameworks, such as Ant-Design, directly provide off-the-shelf components (such as button Buttin, form components, etc.). Developers can use the components provided by the framework to quickly build pages, but because the styles of components are typically preset and packaged, customization requires a large number of built-in styles that override the components.

Instead of off-the-shelf components, Tailwind provides a variety of generic style classes. Developers can directly add a variety of basic classes to the HTML Tag to set the corresponding UI style for elements, through the “overlay combination” of various basic classes to build the required appearance, efficient customized website development. In other words, in TailwindCSS, there are many small classes that represent CSS declarations. When creating a component, you only need to reference a few of its small classes to create the component you need.

Semantic CSS | Atomic/Utility-First CSS

Semantic CSS

To make a button button style, we typically add a semantic class name to an HTML or JSX structure and then write the corresponding class style in a CSS style. For example: Make a Danger style Button.

  <div class="box">
    <button class="danger-button">Button</button>
  </div>

.danger-button {
  height: 32px;
  padding: 4px 15px;
  font-size: 14px;
  border-radius: 2px;
  color: #fff;
  border-color: #ff4d4f;
  background: #ff4d4f;
  text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
  box-shadow: 0 2px #0000000b;
}
Copy the code

This is the most common and conventional way of writing, and is called the Semantic CSS specification. In this specification, the pursuit of separation of concerns, let structure and style play their respective roles, make the structure more semantic. However, there are also many problems:

  • Adding a style to a tag requires thinking about class names that are semantic, conform to code specifications, and fit its purpose.
  • There are often many style rules in each class. Only when the semantic and style of the structure are completely the same, the real reuse can be achieved. If there are differences, it is difficult to achieve style reuse.
  • If we migrate HTML or JSX structures, we also migrate the corresponding CSS, and the migrated styles may become distorted depending on the context.

Atomic/Utility-First CSS

Atomic/Utility-First CSS in contrast to Semantic CSS, utility-First CSS does not put component styles in a class as Semantic CSS does, It gives us a toolbox of different functional classes that we can mix and apply to HTML elements. In the physical world, atoms are the smallest units of general matter, whereas in the CSS world, there is only one CSS rule in a class.

Tailwind CSS, similar to Bootstrap, uses class names to refer to styles. The biggest difference, and the core of Tailwind CSS, is that it is a CSS framework based on Atomic/Utility-First CSS.

Tailwind CSS advantages

  • High degree of customization:

    Tailwind comes with a default configuration that you can override using “Tailwind.config.js” in the project. Everything from color to spacing to font can be easily customized using configuration files. And every part of the configuration file is optional, you just specify what you want to change, and the missing parts will use Tailwind’s default configuration.

  • Reduce the agony of naming a class.

  • No context switching: Tailwind provides almost everything you need out of the box, eliminating the need for developers to switch from HTML to CSS hundreds of times.

  • Responsive design

    • Tailwind CSS follows a move-first design pattern and breakpoint system is flexible. For example, implementing a media query requires different image widths based on different screen widths. The traditional way of writing it is as follows:
@media only screen and (max-width:1280px) {
    .content {
     	width:196px; }}@media only screen and (max-width: 760px) {
    .content {
    	width:128px; }}Copy the code

Tailwind CSS is expressed as follows:

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

Use skills

Choose numeric tags over semantic tags

TailwindCss is semantically good, but using the default naming scheme can add a lot of memory costs to the developer, for example: font size is defined from thin (100) to black (900). Using digital tags reduces the cost of converting UI tool values to TailwindCss classes. For example, font weight: 600 it is not clear whether it corresponds to font bold or font semibold, but font 600 is clear.

Semantic tags are always bad, but digital tags don’t cover all scenarios, and we need to figure out which ones are most beneficial to use.

fontWeight: { thin: '100', extralight: '200', light: '300', normal: '400', medium: '500', semibold: '600', bold: '700', extrabold: '800', black: '900', } fontWeight: { 100: '100', 200: '200', 300: '300', 400: '400', 500: '500', 600: '600', 700: '700', 800: '800', 900: '900',}Copy the code

@apply is not recommended

To extract components

Tailwind is a utility-first framework, so the components you create will contain a collection of utility classes. This means that the same set of utility classes will be written when the same components are created. That is, when you want to change a utility class for this component, you need to change all the components that have the same “intent.”

To overcome this problem, Tailwind offers a solution called “extract components.” Tailwind provides the pseudo-directive **@apply**, which allows you to combine multiple utility classes at once. For example, you have a button component that has the following structure:

<button class="button">   
    Button
</button>
<style> 
.button { 
  @apply bg-blue-600 text-white px-4 py-2 rounded; 
} 
</style>
Copy the code

Functionally, using @apply to generate new functionality classes creates redundant CSS that should be avoided as much as possible, which is the opposite of TailwindCss design.

Using a Tailwind

Make a basic button

<button type="button" class="py-2 px-4 bg-red-500 text-white font-semibold rounded-lg shadow-md">
  button
</button>
Copy the code

Responsive layout

Each utility class in Tailwind can be applied conditionally at different breakpoints, making it easy to build complex responsive interfaces without leaving HTML.

Tailwind provides five breakpoints inspired by common device resolutions:

  • Sm is suitable for equipment with a minimum width of 640px;
  • Md is suitable for equipment with a minimum width of 768px;
  • Lg is suitable for devices with a minimum width of 1024px;
  • Xl is suitable for equipment with a minimum width of 1280px;
  • ** 2XL ** is suitable for equipment with a minimum width of 1536px.

Here is a simple example of a marketing page component that uses a stacked layout on a small screen and a side-by-side layout on a large screen * (resize the browser to see it in action) * :

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
     <img class="h-48 w-full object-cover md:h-full md:w-48" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.5tu.cn%2Fuploads%2Fallimg%2F1706%2Fpic_5tu_big_20170520155824 3571. Jpg&refer = HTTP % 3 a % 2 f % 2 -fpic. 5 tu. Cn&app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1637733958 & t = 28299 dabd6e033 0e876dcf7195742f1f" alt="Man looking at item at a store">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">
        Finding customers for your new business
      </a>
      <p class="mt-2 text-gray-500">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.
      </p>
    </div>
  </div>
</div>
Copy the code

Add button state

Similar to the way Tailwind handles responsive design, style elements such as hover, focus, and so on can be implemented by prefixing utilities with appropriate state variables. For example: Add hover: BG-Red-700.

<button class="... hover:bg-red-700">
    Button
</button>
Copy the code

conclusion

This is Tailwind CSS introduction and practice sharing. In later articles, we will continue to explore how to build a solid asset management system using the global image cloud low code platform. Stay tuned.

In addition, the installation package and installation program of the Low code platform of The Global Image Cloud will be open source in the near future, and you are welcome to download and experience it.

About holomorphic clouds

Portal.clouden. IO is a low-code platform independently developed by Qingyun Technology co., LTD. It is a tool and integration platform for assisting the construction of various digital applications of enterprises based on cloud origin.

The platform currently offers both code-free and low-code application development modes in the cloud, shielding technology complexity. Support for visual designers, enabling developers and business users to quickly develop applications through simple drag-and-drop, parameter configuration, and more. At the same time, it integrates IDaaS identity authentication and container DevOps capabilities to support the integration of enterprise stock services and omni-image cloud services. The platform also contains rich development interfaces and powerful plug-in mechanism, so developers can expand the application capabilities of the platform according to their needs. The vision of All-image Cloud is to provide software components or support services in every quadrant and link of enterprise production and operation.