Language: EN
LuisLlamas Logo
Search
⏲️ ~ 5 minutes Beginner
que-es-y-como-empezar-con-tailwind

What is and how to start with Tailwind CSS

Tailwind CSS is a highly configurable CSS framework that focuses on the “utility first” model, allowing us to create interfaces and designs quickly.

Unlike other CSS frameworks like Bootstrap or Foundation, Tailwind does not come with pre-built components. Instead, it provides a set of utility classes that can be combined to create any design directly in the HTML.

That is, instead of defining a style button-green, Tailwind defines a huge number of “tiny” classes to apply margin, color, padding, etc… For almost all CSS properties.

Then you combine them as you wish in your HTML. An example for clarity:

<div class="bg-blue-500 text-white p-4">

Some of the features that have made Tailwind so popular are,

  1. Flexibility: Tailwind allows you to create unique designs without having to override default styles
  2. Reusability: Utility classes can be reused across different components, reducing redundancy
  3. Maintenance: It makes maintaining and updating CSS in large projects easier

Tailwind is Open Source and all its code and documentation are available on the official Tailwind CSS page and the project repository on GitHub - tailwindlabs/tailwindcss

Installing Tailwind

To start using Tailwind CSS, we first need to install it (obviously 🤗). Tailwind can be added to your project in several ways, but the recommended way is via Nodejs and NPM (Node Package Manager) on your computer.

If you don’t know what they are, or want to learn more, here are these two courses 👇.

Once you have these installed, we need to initialize your project with NPM if you haven’t done that yet:

npm init -y

Now, install Tailwind CSS via npm:

npm install -D tailwindcss

Finally, create the Tailwind configuration file with this command.

npx tailwindcss init

This will generate a tailwind.config.js file at the root of your project, where you can customize your Tailwind configuration.

Basic Configuration

Let’s see how to start using Tailwind in your project. For that, in your project folder

  • Create a styles folder
  • Inside it, a file named main.css

You can use any names you want, and creating a folder is optional. But we will do it this way to keep everything more organized.

In your main.css file, import Tailwind CSS by adding the necessary directives:

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

On the other hand, in your package.json configuration file, we will add an action (a script) to compile your CSS with Tailwind:

{
  "scripts": {
    "build:css": "tailwindcss build styles\\main.css -o dist\\main.css"
  }
}

Now you can run the script to generate your compiled CSS:

npm run build:css

You will see that Tailwind takes your styles\main.css file and generates the dist\main.css file that contains your optimized CSS code, along with some default styles that Tailwind has included.

Integration with HTML

It is also possible to make Tailwind analyze the HTML and JavaScript files, searching for all the classes we are using, including them in the final CSS file. In fact, this is the way we will generally use.

To do this, in the Tailwind configuration file, we modify the Content to analyze all the HTML and JavaScript files in the src folder.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Now create the src folder, and inside it, an HTML file that we will call index.html.

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../dist/main.css" rel="stylesheet">
</head>

<body>
    <h1 class="text-3xl font-bold underline">
        Hello world!
    </h1>
</body>

</html>

Now, if we run the command npm run build:css, we will see that in the output file dist\main.css, Tailwind adds the detected classes from the HTML file (in this example, text-3xl, font-bold, and underline)

Interactive Mode with Watch

It is also possible to run Tailwind in “watch” mode. In this mode, Tailwind will constantly monitor any changes in the HTML and JavaScript files that we make.

Upon any change, Tailwind will automatically react to regenerate the output files. This is very useful during the development phase.

To do this, simply edit the package.json file and add the following script. npx tailwindcss -i ./src/input.css -o ./dist/output.css

{
  "scripts": {    
    "watch:css": "tailwindcss -i styles/main.css -o dist/main.css --watch"
  }
}

Now, if we run the watch:css script, Tailwind will start in interactive mode. Make any change in the HTML, and you will see how the dist/main.css file is automatically modified.

@apply Directives

The @apply directive allows you to reuse utility classes within your custom CSS rules:

/* styles.css */
.btn {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}

This applies the specified utility classes directly to the .btn rule.

Using Plugins

Tailwind has a wide variety of official and community plugins. For example, to add custom fonts, you can use the Tailwind typography plugin:

npm install @tailwindcss/typography

Then, add it to your configuration:

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

Download the Code

All the code from this entry is available for download on Github. github-full

On this page