Dania's blog
Tailwind, from the eyes of a beginner

Tailwind, from the eyes of a beginner

Dania Emari's photo
Dania Emari
·

3 min read

Table of contents

Tailwind CSS is a powerful utility-first CSS framework that enables developers to create highly customizable and responsive web interfaces efficiently. Tailwind CSS was first released to the public on November 1, 2017. It was created by Adam Wathan, Jonathan Reinink, David Hemphill, and Steve Schoger. Since then it’s been installed by millions of users.

Tailwind gained popularity among developers because it combined efficient development, customization, responsiveness, and strong community support contributed to its popularity among developers looking to create modern, responsive, and customizable web interfaces.

How to start using tailwind:

First, you need to install Tailwindcss, so in the terminal write:

npm install -D tailwindcss

Or you can install Tailwind, Postcss and Autofixer as dev dependencies

 npm install -D tailwindcss postcss autoprefixer

Then generate your tailwind.config.js file:

npx tailwindcss init

Then you need to add Tailwind directives to your CSS. For example, if you have a global.css file in your project, then in it you need to write:

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

You need to import your CSS file to your project pages or layout:

import "./globals.css";

how to use the tailwind.config.js file:

After finishing setting up Tailwind for your project, you still can't use it yet, you will find that even though you are coding and styling your project yet there is no effect and nothing has changed and everything is messy. So you need to set up your tailwind.config.js. your config file will look like this:

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

You will use Content, Theme and Plugins to customize your project depending on your needs.

content:

with it, you need to add the paths to all of your template files in your tailwind.config.js file. For example:

content: ["./src/**/*.{html,js}"]

Theme:

It is used to customize and define various design-related aspects of your project. It allows you to control the default styles, colors, spacing, typography, and more. For example, here I created different font sizes to use in my project:

theme: {
    fontSize: {
      xs: ['0.8125rem', { lineHeight: '1.5rem' }],
      sm: ['0.875rem', { lineHeight: '1.5rem' }],
      base: ['1rem', { lineHeight: '1.75rem' }],
      lg: ['1.125rem', { lineHeight: '1.75rem' }],
      xl: ['1.25rem', { lineHeight: '2rem' }],}
  },

Plugins:

It allows you to extend or modify the default functionality of Tailwind by adding custom utility classes, components, or variants. It gives you the ability to integrate third-party plugins or create your own to enhance your project's styling and functionality.

How to set up your Plugins:

There are types of Plugins, Typography, Forms, Aspect Ratio, and Container Queries. you won't have to use all of them in your project, you will only use what you need. For example, if you wanted to use Typography, first you need to install the Plugin in the terminal.

npm install -D @tailwindcss/typography

Then you need to add the Plugin in the tailwind.config.js file.

plugins: [require('@tailwindcss/typography')],

Conclusion:

TailwindCSS can be intimidating for beginners and it can even be unfamiliar at first for some developers and it might take time to learn and get accustomed to using utility classes effectively.

but overall, it's an amazing utility-first CSS framework. it offers Flexibility, Modularity, Customization, and many other features that can help the developer to reach their desirable goal with their project.

Tailwind CSSTailwind CSS Tutorial