TailwindCSS

Tailwind CSS: CSS framework for Kickstart

Discover the future of web design with Tailwind CSS! Efficient, flexible and perfect for beginners and professionals. 🚀

Marco Franke

16. Juni 2024 • 4 min read

In the early days of web design, CSS (Cascading Style Sheets) was used to control the look and layout of websites. Developers had to manually write styles for each element, which often resulted in cluttered and difficult to maintain code. In recent years, however, web design has come a long way, and frameworks like Tailwind CSS have revolutionized the way we design websites.

Why CSS frameworks?

Traditional CSS

/* style for a button */
.btn {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
}

To use this class, you would have to add it to the corresponding HTML element:

<button class="btn">Click here</button>

The-problems-with-traditional-css

Repetitions: Many similar style elements led to redundant sections of code.
Maintainability: Large CSS files quickly became cluttered and difficult to maintain.
Global styles: Changes to one class could have unexpected effects on other parts of the website.

The introduction of CSS frameworks

To solve these problems, CSS frameworks such as Bootstrap and Foundation were developed. These frameworks offered predefined classes and components that allowed developers to create responsive designs quickly and efficiently. However, they also had their own limitations, such as limited customization options and overload from unused styles.

Tailwind CSS: The New Approach

Tailwind CSS is a utility-first CSS framework that allows developers to create custom designs without ever leaving the CSS. Instead of using predefined components, Tailwind provides an extensive collection of utility classes that can be applied directly to HTML.

Advantages of Tailwind CSS

Fine-grained control: Developers can control the look of their elements in detail by combining different utility classes.
Reusability: Utility classes are small and modular, resulting in reusable and maintainable code.
Performance: Tailwind removes unused CSS classes during production, which minimizes file size and improves load times.

A practical example

Suppose you want to create a button. With Tailwind CSS, it looks like this:

<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">
  Click here
</button>

Explained here:

bg-blue-500: Sets the background to blue.
text-white: Sets the text color to white.
font-bold: Makes the text bold.
py-2 px-4: Sets the padding at the top/bottom and left/right.
rounded: Makes the corners of the button rounded.

Why Tailwind CSS is ideal for beginners

Tailwind CSS offers several advantages for beginners:

Quick start: No need to write or understand extensive CSS files.
Intuitive classes: The utility classes are easy to understand and intuitively named.
Instant feedback: Changes can be made directly in the HTML and checked immediately in the browser.

Tailwind CSS compared to other frameworks

While frameworks such as Bootstrap and Foundation offer predefined components that can be implemented quickly, Tailwind CSS offers greater flexibility and control. It allows developers to create exactly the design they want without being constrained by predefined styles.

Tailwind CSS setup and configuration

Installation

Installing Tailwind CSS is straightforward and can be done via npm or Yarn:

npm install tailwindcss

Configuration

After installation, Tailwind can be configured by creating a configuration file:

npx tailwindcss init

This creates a tailwind.config.js file in which customizations can be made:

module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-blue': '#1e40af',
      },
    },
  },
  variants: {},
  plugins: [],
}

Creating a project with Tailwind CSS

A simple HTML project with Tailwind CSS could look like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS example</title>
  <link href="styles.css" rel="stylesheet">
</head>
<body class="bg-gray-100 flex items-center justify-center h-screen">
  <div class="text-center">
    <h1 class="text-4xl font-bold text-gray-800 mb-4">Welcome to Tailwind CSS</h1>
    <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700">
      Click here
    </button>
  </div>
</body>
</html>

The styles.css file contains the Tailwind directives:

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

Additional concepts in Tailwind CSS

Responsive design

Tailwind provides built-in support for responsive design. Classes can be adapted for different screen sizes using prefixes such as sm:, md:, lg:, and xl::

<div class="bg-white sm:bg-gray-100 md:bg-gray-200 lg:bg-gray-300 xl:bg-gray-400">
  Responsive design
</div>

State-specific styles

With Tailwind, you can also apply state-specific styles such as hover:, focus:, and active: can be applied:

<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-opacity-50">
  Interactive button
</button>

Darkmode

Tailwind offers an easy way to implement darkmode. The configuration is done in the tailwind.config.js file:

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

Dark mode-specific classes can then be used:

<div class="bg-white dark:bg-gray-800">
  Dark mode supported
</div>

Conclusion 📃

Tailwind CSS has revolutionized the way we design websites. It offers a powerful and flexible alternative to traditional CSS frameworks and allows developers to create custom designs quickly and efficiently. For beginners and experienced developers alike, Tailwind CSS is an indispensable tool in modern web development.