Getting Started with Tailwind CSS: HTML, CSS, and JavaScript Guide

Introduction

Tailwind is a highly popular utility-first CSS framework that simplifies the process of building modern and responsive user interfaces. Unlike traditional CSS frameworks that provide predefined components, tailwind CSS focuses on providing a set of low-level utility classes that can be directly applied to HTML elements.

Key Features

Utility-First Approach: Tailwind promotes a utility-first approach to styling, which means that you build your UI by applying small, single-purpose utility classes directly in your HTML. For example, you might use classes like text-center , bg-blue-500 , or p-4 to control various aspects of the layout and appearance.

Modular and Composable: Tailwind classes are designed to be modular and composable. You can combine multiple utility classes to achieve complex layouts and styles without writing custom CSS.

Responsive Design: Tailwind provides responsive utilities that allow you to easily create designs that adapt to different screen sizes. You can use classes like sm: , md: , or lg: , and xl: to apply styles at specific breakpoints.

Configuration and Customization: Tailwind is highly configurable. You can use a configuration file to customize the default utility classes, add your own, or remove ones you don’t need. This makes it flexible and adaptable to different project requirements.

Just-In-Time(JIT)Mode: Tailwind introduced a Just-In-Time mode that generates CSS on-demand based on classes you use in your HTML. This can significantly reduce the final CSS file size, making your site more performant.

How does Tailwind work?

Install Tailwind

When we install Tailwind we add it to our code base,

npm install -D tailwindcss
npx tailwindcss init

npx stands for Node Package eXecute. It is simply an NPM package runner. It allows developers to execute any Javascript Package available on the NPM registry without even installing it.

Add Configuration

We add the tailwind.config.js to our root directly, This file is essential for Tailwind to locate the files containing the Tailwind code and execute any additional configurations you’ve set.

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: []
}

The content key tells Tailwind where our files containing the tailwind code are located, and the class names, are the names for our CSS code.

I mentioned the JIT(Just-In-Time) Mode where Tailwind creates the CSS based on the utility classes you used as opposed to inserting all the predefined utility classes.
To use the JIT we simply mode: “jit” to our tailwind.config.js

module.exports = {
  mode: "jit",
  purge: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: []
}

Or we can add the predefined classes by placing the below code in our CSS file, we can call input.css

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

@tailwind base; It’s a directive used in Tailwind CSS to include the base styles provided by Tailwind. The base styles typically include things like resetting or normalizing default browser styles.

@tailwind components; It’s a directive in Tailwind CSS used to include pre-defined styles for common UI components. These styles cover components like buttons, forms, navigation elements, and other UI elements commonly used in web development.

@tailwind utilities; It’s a directive in Tailwind CSS that includes all the utility classes provided by Tailwind. These utility classes allow you to apply specific styles directly to HTML elements without having to write custom CSS. eg

.m-4 {
  margin: 1rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.text-center {
  text-align: center;
}

.bg-blue-500 {
  background-color: #4299e1;
}

Start the Tailwind CLI build process

For the Predefined style, we run npx tailwindcss -i ./src/input.css -o ./dist/output.css — watch

The input.css is where we included this
@tailwind base;
@tailwind components;
@tailwind utilities;

For the JIT mode, we run npx tailwindcss -o ./dist/output.css — watch

The output.css should now contain the CSS classes.

Then we include the output.css in the link href in our HTML file

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link href="/dist/output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

With that we can start using Tailwind, if you have multiple HTML files, you can always use the same output.css as long as you are using Tailwind.

Using PostCSS With Tailwind

First, what is PostCSS

PostCSS is a tool for transforming CSS with JavaScript Plugins. This plugins can

• Lint your code: It can analyze your CSS for potential errors or stylistic issues using plugins like stylelint,
• Support for Variables and Mixins: PostCSS can process variables and mixins, allowing you to write more maintainable and reusable styles.
• Autoprefix your code: It can automatically add vendor prefixes to CSS rules. This ensures that your styles work consistently across different browsers.
• Transpile Future CSS Syntax: PostCSS can process modern CSS syntax (like variables, nesting, and more) that might not be widely supported by all browsers yet. This allows you to write cutting-edge CSS and still have it work across different environments.
• Optimize CSS: PostCSS can strip out unnecessary whitespace, remove redundant rules, and perform other optimizations to make your CSS more efficient and lightweight.
• Image Inlining: It can replace url() references to images with base64 encoded data URIs, reducing the number of HTTP requests.
• Add Polyfills: PostCSS can automatically add polyfills or fallbacks for CSS features that aren’t supported in certain browsers.
• Modular CSS: It supports the creation of modular CSS, allowing you to write styles in separate files and then combine them during the build process.
• Generating CSS Grids: It can generate cross-browser compatible CSS Grid layouts.
• Create Style Guides: PostCSS can generate style guides or documentation from your CSS code.
• Custom Plugins: You can create your own plugins to perform specific tasks that are tailored to your project’s needs.
• Integration with Build Tools: PostCSS can be easily integrated into popular build tools like Webpack, Gulp, or Grunt.

There are many existing plugins available that extend the functionality of PostCSS. Having said that let’s see how we can use it with Tailwind.

Integrating it with Tailwind

We first have to install Tailwind, Postcss

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Here we installed it with the autoprefixer plugin as it can also be useful.

Add Tailwind to your PostCSS configuration

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

We repeat the above steps and with that, we can start using Tailwind.

Conclusion

Tailwind is an excellent tool that saves time and keeps your code organized. It can be integrated with other frameworks and build tools, and the configuration remains consistent. I hope you found this article enjoyable and informative.