What is Tailwind CSS?

CSS (Cascading Style Sheets) is a simple design language intended to simplify the process of making web pages presentable.

Using CSS, users can create a responsive and amazing user interface with the help of a library such as Bootstrap, bhumlu.

Tailwind CSS is a “utility-first” CSS framework that provides a deep catalog of CSS classes and tools that lets you easily get started styling your website or application. The beauty of Tailwind CSS is it’s doesn’t impose design specification, but you simply bring components together to construct a unique user interface.

What is Tailwind CSS?

Tailwind CSS is a “utility first-class” CSS framework for rapidly building a custom user interface. It is the best way to write inline styling and achieve an awesome user interface without writing a single line of code.

In contrast to other CSS frameworks like bootstrap or materialize CSS. It comes with pre-defined components, instead of Tailwind CSS operates on a lower level and provides you with a set of CSS helper classes. By using their classes you can create custom designs easily.

How to create Tailwind CSS

Although CDN is a good way to import styling in your project, many features of Tailwind CSS are not available using the CDN builds. Install Tailwind via npm.

Install Tailwind

Tailwind is available on npm and can be installed using npm. you’ll want to install Tailwind and its peer-dependencies via npm.

npm install tailwindcss@latest postcss@latest autoprefixer@latest

Since Tailwind does not automatically add vendor prefixes to the CSS it generates, we recommend installing autoprefixer to handle this for you as we’ve shown in the snippet above.

Add Tailwind as a PostCSS plug-in

Add Tailwind CSS and autoprefixer to your PostCSS configuration. Most of the time this is a postcss.config.js file at the root of your project, but it could also be a .postcssrc file or postcss key in your package.json file.

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

Create a Tailwind config file

if you want to customize your Tailwind installation, generate a config file for your project using Tailwind CLI utility included when you install the ‘Tailwind CSS’ npm package.

npx tailwindcss init

This will create a minimal Tailwind.config.js file at the root of your project:

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

Include Tailwind in your CSS

If you don’t have a CSS file, use ‘@Tailwind’ directive to inject Tailwind’s ‘base’, ‘components’, and ‘utility style’, replacing the original file content.

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

Tailwind will swap these directives out at build-time with all of the styles it generates based on your configured design system.

Building your CSS

Actually, you build your project depend on the tools that you’re using. Your framework may include a command like npm run dev to start a development server that compiles your CSS in the background, you may be running webpack yourself, or maybe you’re using postcss-cli and running a command like postcss styles.css -o compiled.css.

When building for production, be sure to configure the purge option to remove any unused classes for the smallest file size:

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

Using Tailwind without PostCSS

For simple projects or just giving Tailwind a spin, you can use the Tailwind CLI tool to generate your CSS without configuring PostCSS or even installing Tailwind as a dependency if you don’t want to.

Use npx which is a tool that is automatically installed alongside npm to generate a fully compiled Tailwind CSS file:

npx tailwindcss-cli@latest build -o tailwind.css

This will create a file called Tailwind.css generated based on Tailwind’s default configuration, and automatically add any necessary vendor prefixes using autoprefixer.

Now you can pull this file into your HTML just like any other stylesheet:

<!doctype html>
<html>
<head>
  <!-- ... -->
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="/tailwind.css" rel="stylesheet">
</head>
<body>
  <!-- ... -->
</body>
</html>

Using a custom CSS file

create a CSS file wherever you normally would and use the @Tailwind directive to include Tailwind’s base, components, and utilities styles:

/* ./src/tailwind.css */
@tailwind base;
@tailwind components;

.btn {
  @apply px-4 py-2 bg-blue-600 text-white rounded;
}

@tailwind utilities;

Then include the path to that file when building your CSS with npx Tailwind CSS build:

npx tailwindcss-cli@latest build ./src/tailwind.css -o ./dist/tailwind.css

Customize your configuration

If you would like to customize what Tailwind generates, create a Tailwind.config.js file using the Tailwind CLI tool:

npx tailwindcss-cli@latest init

This will create a minimal Tailwind.config.js file at the root of your project:

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

This file will automatically be read when building your CSS with npx Tailwind CSS build:

npx tailwindcss-cli@latest build ./src/tailwind.css -o ./dist/tailwind.css

If you’d like to keep your config file in a different location or give it a different name, pass the config file path using the -c option when building your CSS:

npx tailwindcss-cli@latest build ./src/tailwind.css -c ./.config/tailwind.config.js -o ./dist/tailwind.css

Building for production

When building for production, set NODE_ENV=production on the command line when building your CSS:

NODE_ENV=production npx tailwindcss-cli@latest build ./src/tailwind.css -o ./dist/tailwind.css

Tailwind CSS update includes:

All-new color palette

It includes 220 total colors and a new workflow for building your own color schemes

Dark mode support

Making it easier than ever to dynamically change your design when dark mode is enabled

Extra-wide 2XL breakpoint

It’s used for designing at 1536px and above

New outline ring utilities

Which are almost as good as if they would just make outline-radius a real thing

Utility-friendly form styles

A new form reset that makes it easy to customize form elements (even checkboxes) with just utility classes

Default line-heights per font-size

Because if we can’t make using a 1.5 line-height with a 48px font illegal we should at least make it not the default

Extended spacing, typography, and opacity scales

For fine-tuning things at the micro-level, making an even bigger impact with huge headlines, and for when opacity-25 wasn’t enough and opacity-50 was too much

Use @apply with anything

It’s including responsive, hover, focus, and other variants

New text-overflow utilities

Used for controlling things more precisely than you can with truncate alone

Extend variants

Using this feature you can enable extra variants like focus-visible without redeclaring the entire list or thinking about ordering

Group-hover and focus-within by default because you were enabling them on every project anyways

Default transition duration and easing curve, so you only have to add 17 classes to make a button instead of 19

Conclusion

Tailwind gives you a straightforward workflow, without restricting options or limiting flexibility. The utility-first approach offered by Tailwind is successfully implemented by large companies like GitHub, Heroku, Kickstarter, Twitch, Segment, and more.