Core Concepts - TailwindCSS

Tailwind CSS is a utility-first framework that simplifies styling by using small, reusable classes. This approach allows for rapid, flexible design without extensive (or even any) custom CSS.

TIP

As Tailwind has such a large variety of utility classes, we will only cover the core concepts here. We recommend checking out the official documentation for more in-depth information and a full overview of all available utility classes. Please use their documentation as a reference when working with Tailwind.

Installation

When using the TALL-stack you don't have to worry about the installation of Tailwind as it is already included when using the correct setup. Do you want to use Tailwind in a different project? Use one of the following methods or check the official documentation for more options.

Using CDN

Simply include the following script tag in the head of your HTML page and you are good to go:

<script src="https://cdn.tailwindcss.com"></script>

WARNING

The above method should work, but it is possible that you will not get any auto-completion in your editor. If you want to have auto-completion (believe me, you do) you can install TailwindCSS via NPM as explained below or one of the other options explained in the official documentation.

Using npm

1. Install

npm init #(if you don't have a package.json file yet)
npm install -D tailwindcss
npx tailwindcss init

2. Configure template paths

Add the paths to all of your template files in your tailwind.config.js file by changing the content property:

module.exports = {
    content: ["./src/**/*.{html,js}"],
    /** keep the other properties as is */
}

3. Add Tailwind directives to your CSS

If you don't have an input CSS file yet, create one and include the following lines:

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

4. Start the build process

Run the following command (with correct file paths/names) to scan your template files for classes and build your CSS from your input CSS file to an output CSS file.

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

5. Include the output CSS file in your HTML

Link the output CSS file in the head of your HTML page:

<link href="./output.css" rel="stylesheet">

That's it! You are now ready to use Tailwind in your project.

Core Concepts

1. Utility Classes

TailwindCSS is built around utility classes, where each class corresponds to a single CSS property. For example:

• text-center: aligns text to the center.
• bg-blue-500: applies a blue background color.
• p-4: adds padding of 1rem (16px).

By combining these utilities, you can create complex designs without writing custom CSS.

TIP

You don't have to memorize all the utility classes. TailwindCSS provides an excellent searchable documentation to help you find the right classes for your needs. The autocomplete feature in your editor will also help you discover and apply classes more efficiently.

In-depth explanation of utility classes

2. Responsive Design

TailwindCSS makes responsive design easy by offering utility variants for different screen sizes. Each breakpoint prefix (sm, md, lg, xl, 2xl) helps you control how elements look on various screen sizes:

• md:text-lg: Applies a large text size on medium screens and larger.
• sm:p-2 lg:p-8: Adds different padding for small and large screens.

In-depth explanation of responsive design

3. Pseudo-Class Variants

Tailwind allows you to apply styles based on pseudo-classes, such as hover, focus, or active:

• hover:bg-red-500: Changes the background color when hovering.
• focus:ring-2: Adds a focus ring when the element is focused.

In-depth explanation of pseudo-class variants

4. Theme Customization

TailwindCSS is fully customizable. You can extend or modify the default theme (colors, spacing, typography, etc.) by configuring the tailwind.config.js file. This allows you to define your own design tokens:

// tailwind.config.js
module.exports = {
    theme: {
        screens: {
            sm: '480px',
            md: '768px',
            lg: '976px',
            xl: '1440px',
        },
        colors: {
            'blue': '#1fb6ff',
            'pink': '#ff49db',
            'orange': '#ff7849',
            'green': '#13ce66',
            'gray-dark': '#273444',
            'gray': '#8492a6',
            'gray-light': '#d3dce6',
        },
        fontFamily: {
            sans: ['Graphik', 'sans-serif'],
            serif: ['Merriweather', 'serif'],
        },
        extend: {
            spacing: {
                '128': '32rem',
                '144': '36rem',
            },
            borderRadius: {
                '4xl': '2rem',
            }
        }
    }
}

In-depth explanation of theme customization

Conclusion

The main thing to remember when working with TailwindCSS is that you are not writing CSS in the traditional way, but rather applying utility classes directly to your HTML elements. These classes correspond to specific CSS properties and values, allowing you to build complex, responsive designs without the need for custom stylesheets.

This approach can be a bit overwhelming at first, but once you get the hang of it, you'll (probably) find that it speeds up your development process and makes your code more maintainable.

TIP

As you work with TailwindCSS, you might notice that your HTML can quickly fill up with many utility classes. This can become a challenge in large HTML files but can be mitigated by separating pages into reusable components using frameworks like Laravel (Blade/Livewire components) or Vue.js. This approach helps keep your code cleaner and more manageable and is the modern way of building web applications.