Tailwind CSS Introduction

Tailwind this CSS framework is not something new, but has not been to study, recently there is a need to look at it, it looks relatively simple.

This thing looks like a new DSL or something, providing many commonly used and built-in CSS styles, encapsulating them into syntax, and then providing a PostCSS plugin to process the encapsulated syntax back into ordinary CSS.

All we need to do is install Tailwind’s PostCSS plugin and use his encapsulated DSL.

What is PostCSS?

In web application development, the writing of CSS code is an important part. From the original CSS1 to the current CSS3, and then to the next version of the CSS specification, the specification itself has been constantly evolving. This has brought efficiency improvements to developers. However, similar to the situation of specifications in other web fields, CSS specifications have always had various problems in terms of browser compatibility. The progress of implementing CSS specifications in different browsers also varies greatly. In addition, there is still a certain gap between the development speed of the CSS specification itself and the expectations of the community. This is also an important reason why CSS preprocessing languages such as SASS and LESS can become popular. SASS and LESS provide many more practical features and also reflect the needs of developers for CSS languages. PostCSS, which is introduced in this article, is a popular tool for processing CSS. PostCSS adds endless possibilities to CSS processing with its powerful plugin system.

PostCSS itself is a relatively single-function tool. It provides a way to handle CSS with JavaScript code. It is responsible for parsing CSS code into an Abstract Syntax Tree (AST) structure, which is then handled by plugins. Plugins can perform various operations based on the AST of CSS code, such as supporting variables and mixins, increasing browser-related declaration prefixes, or transpiling style rules using future CSS specifications into formats supported by current CSS specifications. From this perspective, the strength of PostCSS lies in its constantly evolving plugin system. Currently, PostCSS has more than 200 plugins with different functions. Developers can also develop their own PostCSS plugins according to the needs of the project.

** PostCSS has brought controversy over its classification in the community since its birth. This is mainly due to the post in its name, which is easily reminiscent of PostCSS being used as a post-processor for CSS, thus being compared to existing CSS pre-processor languages such as SASS and LESS. Analogy **.

In fact, there are only two main functions of PostCSS: the first is to parse CSS into an AST that JavaScript can manipulate, and the second is to call a plugin to process the AST and get the result. Therefore, PostCSS cannot simply be classified as a CSS preprocessing or post-processing tool. PostCSS can perform many tasks, covering both preprocessing and post-processing in the traditional sense. PostCSS is a brand new tool that brings front-end developers a different way of handling CSS.

How to use PostCSS

PostCSS is generally not used alone, but integrated with existing build tools. PostCSS can be integrated with mainstream build tools such as Webpack, Grunt, and Gulp. After completing the integration, select the PostCSS plugin that meets the functional requirements and configure it.

Postcss-loader is used in Webpack to perform plug-in processing. In Listing 1, postcss-loader is used to process .css files, added after style-loader and css-loader. An additional postcss method returns the required PostCSS plug-in. The role of require (‘autoprefixer’) is to load the Autoprefixer plug-in.

var path = require('path');

module.exports = {
	context: path.join(__dirname, 'app'),
	entry: './app',
	output: {
		path: path.join(__dirname, 'dist'),
		filename: 'bundle.js'
	},
	module: {
		loaders: [
			{
				test: /\.css$/,
				loader: "style-loader!css-loader!postcss-loader"
			}
		]
	},
	postcss: function () {
		return [require('autoprefixer')];
	}
}

How to enable and set up Tailwind

passed

For most projects (and to take advantage of Tailwind’s custom features), you will need to install Tailwind and its dependencies via npm.

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

Since Tailwind does not automatically add browser engine prefixes to the generated CSS, we recommend installing autoprefixer to handle this issue, as shown in the code snippet above.

As

Add tailwindcss and autoprefixer to your PostCSS configuration. In most cases, this is the postcss.config.js file in the root of the project, but it may also be the .postcssrc file or specified by the postcss key in the package.json file.

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

Create your profile

If you want to customize your Tailwind installation, you can generate a configuration file using the Tailwind CLI tool, which is included in the npm package tailwindcss.

npx tailwindcss init

This will create a minimal tailwind.config.js file in your project root directory.

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Include

If you have not yet created a CSS file, use the @tailwind directive to inject Tailwind’s base, components, and utilities styles:

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

Tailwind will replace these instructions at build time with all styles generated based on your configured design system.

If you are using postcss-import (or the tool behind it, such as Webpacker for Rails), please use our import instead of the @tailwind directive to avoid problems when importing any other files.

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

If you are using a JavaScript framework like React or Vue that supports importing CSS files directly into JS, you can also skip creating CSS files entirely and directly import tailwindcss/tailwind.css, which already has all these instructions installed.

// app.js
import "tailwindcss/tailwind.css"

Generate your

The way you actually build your project will depend on the tools you use. Your framework may include commands like npm run dev to start a development server that compiles CSS in the background, you may be running webpack yourself, or you may be using postcss-cli and running commands like postcss styles.css -o compiled.css.

Optimize with other preprocessors

Since Tailwind is a PostCSS plugin, nothing prevents you from using Sass, Less, Stylus, or other preprocessors, just like you can use other PostCSS plugins such as Autoprefixer.

It is important to note that you do not need to use preprocessors in Tailwind - you usually write very little CSS in Tailwind projects, so using preprocessors is not as beneficial as in a project where you write a lot of custom CSS.

Build-time import

One of the most useful features provided by the preprocessor is the ability to organize your CSS into multiple files and combine them at build time by processing @import statements in advance instead of in the browser.

The canonical plugin for handling PostCSS is postcss-import.

To use it, please install the plugin through npm.

npm install postcss-import

Then make it the first plugin in the PostCS configuration.

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

One important thing to note about postcss-import is that it strictly adheres to the CSS specification and does not allow the use of @import statements anywhere except at the top of the file.

Built-in Nesting plugin to support syntax such as’ @apply ’

To add support for nested declarations, we recommend our bundled tailwindcss/nesting plugin, which is a PostCSS plugin that can wrap PostCSS nesting or PostCSS nesting, and serves as a compatibility layer to ensure that the nested plugin you choose correctly understands Tailwind’s custom syntax, such as @application and @screen.

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss/nesting'),
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

Variables

These days CSS variables (officially known as custom properties) have really good browser support, so you don’t need a preprocessor to use variables at all.

:root {
  --theme-color: #52b3d0;
}

/* ... */

.btn {
  background-color: var(--theme-color);
  /* ... */
}

We use CSS variables extensively within Tailwind itself, so if you can use Tailwind, you can use native CSS variables.

You may also find that most of the things you’ve used variables for in the past can be replaced with Tailwind’s theme() function, which gives you access to all of your design tokens from your tailwind.config.js file directly in your CSS:

.btn {
  background-color: theme('colors.blue.500');
  padding: theme('spacing.2') theme('spacing.4');
  /* ... */
}

Vendor

For automatically managing vendor prefixes in your CSS, you should use Autoprefixer.

To use it, install it via npm: - > You can use the postcss-press-env plugin to add support for upcoming CSS features to your project.

To use it, please install it via npm.

npm install autoprefixer

Then add it to the very end of your plugin list in your PostCSS configuration:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

Production optimization

Using the default configuration, the development version of TailwindCSS is 3645.2kB uncompressed, 294.2kB compressed with Gzip, and 72.8kB compressed with Brotli.

This may sound huge, and that’s because design is huge.

In order to make the development experience as productive as possible, Tailwind generates thousands of functional classes for you, most of which you may not actually use.

Think of Tailwind as a giant Lego box - you dump it on the floor, build what you want to build, and then when you’re done, you put all the pieces you don’t need back into the box.

For example, Tailwind generates a margin utility for every dimension in your spacing scale, for every side of an element you might want to apply a margin to, and for every breakpoint used in your project. This results in hundreds of different combinations, all of which are important but not all of which are needed.

When building production, you should always use Tailwind’s purge option to tree-shake to optimize unused styles and optimize your final build size. When using Tailwind to remove unused styles, it’s hard to end up with more than 10kb of compressed CSS.

Write cleanable

Before you start using the Purge feature, it’s important to understand how it works and build the right mental model to ensure you never accidentally remove important styles when building for production.

PurgeCSS (the library we use under the engine) is intentionally very naive in the way it looks for classes in HTML. It doesn’t try to parse your HTML and look for class attributes, nor does it dynamically execute your JavaScript - it just looks for any string that matches this Regular Expression throughout the file.

/[^<>"'`\s]*[^<>"'`\s:]/g

This can basically match any string separated by spaces, quotes, or angle brackets, including HTML tags, attributes, classes, and even the actual written content in your markup.

<div class="md:flex">
  <div class="md:flex-shrink-0">
    <img class="rounded-lg md:w-56" src="/img/shopping.jpg" alt="Woman paying for a purchase">
  </div>
  <div class="mt-4 md:mt-0 md:ml-6">
    <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">
      Marketing
    </div>
    <a href="/get-started" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">
      Finding customers for your new business
    </a>
    <p class="mt-2 text-gray-600">
      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>

This means that it is important to avoid dynamically creating classes with string concatenation in your template, otherwise PurgeCSS will not know to save these classes.

For example, do not use string connection.

<div class="text-{{  error  ?  'red'  :  'green'  }}-600"></div>

Instead, dynamically select a complete class name

<div class="{{  error  ?  'text-red-600'  :  'text-green-600'  }}"></div>

As long as a class name appears in your template, PurgeCSS will not delete it.

Remove unused CSS

Basic purposes
To get started, use the purge option to provide a path array for all your template files.

// tailwind.config.js
module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.vue',
    './src/**/*.jsx',
  ],
  theme: {},
  variants: {},
  plugins: [],
}

For example, if you have a JS file in your project that dynamically switches some classes in your HTML, you should make sure to include the file in this list.

Now, whenever you set NODE_ENV to production when compiling CSS, Tailwind will automatically remove unused styles from your CSS.

Manually enabled

If you want to manually control whether unused styles should be removed (rather than implicitly relying on environment variables), you can use an object syntax and provide the enabled option to specify your template using the content option.

// tailwind.config.js
module.exports = {
  purge: {
    enabled: true,
    content: ['./src/**/*.html'],
  },
  // ...
}

** We recommend only removing unused styles in production, because removing them in development means that you need to re-compile your template at any time you change it, and compiling is much slower with PurgeCSS enabled. **

How to use Tailwind

Functional category first

<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>

In the above example, we used:

Use Tailwind’s flexbox and padding classes (flex, flex-shrink-0, and p-6) to control the overall card layout

• Use the max-width and margin function classes (max-w-sm and mx-auto) to set the card width and centered text

• Use the’background color ‘,’ border radius’, and’box-shadow ‘function classes (’ bg-white ‘,’ rounded-xl ‘, and’shadow-md’) to set the appearance style of the card

• Use the width and height function classes (w-12 and h-12) to set the size of the logo image

Use the space-between function class (space-x-4) to handle spacing between logos and text

• Use font size, text color, and f ont-weight function classes (text-xl, t ext-black, font-medium, etc.) to style card text

This method allows us to achieve a fully customized component design without writing a single line of custom CSS.

I know you’re thinking: “This is so tedious, what a mess!” You’re right, it’s kind of ugly. In fact, it’s almost impossible to think it’s a good idea when you first see it - you have to actually try it.

But once you actually build something this way, you’ll quickly notice some really important advantages:

• You didn’t waste your energy naming classes. No need to add some silly class names like’sidebar-inner-wrapper 'just to set some styles, no need to suffer from the perfect abstract naming of a flex container.

• Your CSS stops growing. With traditional methods, the CSS file gets bigger every time a new feature is added. With function classes, everything is reusable, so you hardly need to write new CSS.

• Changes will be safer. CSS is global, you never know what will break when you make changes. Classes in your HTML are local, so you can change them without worrying about other issues.

When you realize how productive it is to use predefined functional classes in HTML, working any other way can feel like torture.

Responsive design

Each function class in Tailwind can be conditionally applied to different breakpoints, which makes it easy for you to build complex responsive interfaces without leaving HTML.

1. According to the commonly used device resolution scheme, there are 5 built-in breakpoints by default:

Breakpoint Prefix	Minimum Width	CSS
sm	640px	@media (min-width: 640px) { … }
md	768px	@media (min-width: 768px) { … }
lg	1024px	@media (min-width: 1024px) { … }
xl	1280px	@media (min-width: 1280px) { … }
2xl	1536px	@media (min-width: 1536px) { … }
To add a function class that only takes effect at a specific breakpoint, simply prefix the function class with the breakpoint name followed by the: character.

<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
<img class="w-16 md:w-32 lg:w-48" src="...">

This applies to every feature class in the framework, which means you can change anything at a given breakpoint, even things like character spacing and cursor style.

2. Customize breakpoints

You can fully customize your breakpoints in the tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }

      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}

Tailwind also supports many other common functions, such as dark mode, extraction components, custom function classes, etc. It also provides functions and instructions such as @apply. For specific docs, please refer to the following doc link.

Reference article:

• 一文搞懂什么是PostCSS
• TailwindCSS 中文文档