Tutorial in TailwindCSS Online Tutorials

Tutorial in TailwindCSS

1. What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows you to build modern and responsive UIs quickly. Instead of writing custom CSS, you use pre-defined utility classes directly in your HTML.

2. Installing Tailwind CSS

Using CDN (Quick Start)

Add the following link to your HTML file:

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

Using npm (Recommended for Projects)

Run the following commands:

npm install -D tailwindcssnpx tailwindcss init

This will generate a tailwind.config.js file.

Modify tailwind.config.js to enable Tailwind:

module.exports = {  content: ["./src/**/*.{html,js}"],  theme: {    extend: {},  },  plugins: [],}

Then, create a CSS file (styles.css) and import Tailwind:

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

Run Tailwind in watch mode:

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

3. Basic Utility Classes

Layout & Spacing

<div class="p-4 m-2 border bg-gray-200">Padding & Margin</div>

Typography

<p class="text-xl font-bold text-blue-500">Hello, Tailwind!</p>

Flexbox & Grid

<div class="flex justify-center items-center h-screen bg-gray-100">  <div class="bg-white p-6 rounded-lg shadow-lg">Centered Box</div></div>

<div class="grid grid-cols-3 gap-4">  <div class="bg-red-300 p-4">1</div>  <div class="bg-green-300 p-4">2</div>  <div class="bg-blue-300 p-4">3</div></div>

4. Responsive Design

Tailwind uses sm, md, lg, xl for breakpoints:

<div class="text-base md:text-lg lg:text-xl xl:text-2xl">  Responsive Text</div>

5. Custom Components with `@apply`

You can create reusable styles:

@layer components {  .btn {    @apply bg-blue-500 text-white px-4 py-2 rounded-lg;  }}

Use it in HTML:

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

6. Dark Mode Support

Enable dark mode in tailwind.config.js:

darkMode: 'class'

Toggle dark mode in HTML:

<body class="dark:bg-gray-900 dark:text-white">  <p class="dark:text-gray-300">This text changes in dark mode.</p></body>

7. Tailwind Plugins

Tailwind has useful plugins like Forms, Typography, and Aspect Ratio:

npm install @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio

Add them to tailwind.config.js:

plugins: [  require('@tailwindcss/forms'),  require('@tailwindcss/typography'),  require('@tailwindcss/aspect-ratio'),]

8. Animations & Transitions

<button class="bg-blue-500 text-white px-4 py-2 transition hover:bg-blue-700">  Hover Me</button>

9. Tailwind with React

Install Tailwind in a React project:

npx create-react-app my-appcd my-appnpm install -D tailwindcssnpx tailwindcss init

Add Tailwind to index.css:

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

Now, use Tailwind classes in React components:

Disclaimer for AI-Generated Content:
The content provided in these tutorials is generated using artificial intelligence and is intended for educational purposes only.