Onjsdev

Share


TailwindCSS Tutorial


By onjsdev

Dec 10th, 2023

Tailwind CSS is a popular utility-first CSS framework that allows you to rapidly build modern websites without ever leaving your HTML. It provides a collection of pre-built classes that you can apply directly to your HTML elements.

Installation

You can install Tailwind CSS using npm or yarn. Open your terminal and run:

# Using npm
npm install tailwindcss

# Using yarn
yarn add tailwindcss

Create Configuration File

Generate a configuration file for Tailwind CSS using the following command:

npx tailwindcss init

This will create a tailwind.config.js file in your project.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [".//**/*.{html,js}"], // Enter where you html files are at
  theme: {
    extend: {},
  },
  plugins: [],
}

This will create a tailwind.config.js file in your project.

Create Your Stylesheet

Create a new CSS file (e.g., styles.css) and import Tailwind CSS:

/* styles.css */

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* Your custom styles go here */

Start the Tailwind CLI build process

Open terminal and run:

npx tailwindcss -i ./style.css -o ./output.css --watch

Include in HTML

Include the generated CSS file in your HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="output.css">
  <title>Your Tailwind CSS Project</title>
</head>
<body>
  <!-- Your HTML content here -->
</body>
</html>

Start Using Tailwind CSS

Now you can start using Tailwind CSS classes directly in your HTML. For example:

<div class="bg-blue-500 text-white p-4">
  This is a blue box with white text and padding.
</div>

How To Apply Styles with Tailwind

Tailwind has vast of amount built-in classes to style elements. We can use classes for things like:

  • Margin and padding: mt-4, mx-auto, pb-2
  • Text alignment: text-center, text-left, text-right
  • Font size and style: text-xl, font-bold, italic
  • Colors: bg-blue-500, text-gray-700, border-red-500
  • Responsive styles: sm:text-lg, md:flex, lg:hidden

Building Responsive Websites:

Tailwind makes building responsive websites easy with its responsive variants. You can use responsive variants to change the styles of your website depending on the screen size. For example, you can use the sm: prefix to target small screens, the md: prefix for medium screens, and the lg: prefix for large screens.

Here is an example:

<!-- Responsive Text Size -->
<p class="text-sm md:text-lg lg:text-xl">This text is responsive.</p>

<!-- Responsive Margin and Padding -->
<div class="p-4 md:p-8 lg:p-12">
  This div has different padding on small, medium, and large screens.
</div>

<!-- Responsive Visibility -->
<div class="hidden md:block lg:hidden">
  This div is hidden on large screens.
</div>

Beyond the Basics:

Once you've mastered the basics, you can explore the vast range of Tailwind features, including:

  • Components: Build reusable components for common UI elements like buttons, cards, and forms.
  • Plugins: Extend Tailwind's functionality with community-built plugins.
  • Directives: Control the behavior of Tailwind classes with directives like @apply and @screen.

Official Tailwind Documentation: https://tailwindcss.com/docs/installation

Conclusion

This is a basic setup to get you started with Tailwind CSS. As you become more familiar with it, you can explore advanced features and optimizations.

But it's important to understand basic CSS concepts to utilize it effectively. Start with the basics, practice regularly, and don't hesitate to explore the available resources to enhance your learning.

Thank you for reading.