Tailwind CSS

19 tutorials

All

Tailwind CSS

Build a Static Site with Figma & Astro

Django with HTMX

Node.js Tutorial for Beginners

JavaScript

Python 3 for Beginners

CSS Positioning Tutorial

Canva Tutorials

HTML Tutorial for Beginners

YouTube SEO Tutorial

PSD to Responsive Website

TypeScript Tutorial

Claude Code

Responsive Web Design

PSD to WordPress

GraphQL Crash Course

CSS Animation Tutorial

CSS Flexbox Tutorial

JavaScript ES6 Tutorial

Angular 2 Tutorial

SASS Tutorial

CSS Tips and Tricks

WebSockets (Socket.io) Tutorial

Asynchronous JavaScript

Grunt JS Tutorial

Styling HTML 5 Forms

Webpack Tutorial for Beginners

REST API Tutorial

Vue JS 2 Tutorial

Vuex Tutorial

JavaScript DOM Tutorial

CSS Grid Tutorial

OAuth Login (Passport.js) Tutorial

Django Tutorial

Object Oriented JavaScript Tutorial

#1 Intro & Setup

Get started with Tailwind CSS — learn what utility-first CSS means, why Tailwind is different from traditional frameworks like Bootstrap, and set up your first project using the Tailwind CLI.

#2 HTML Template

Build a solid HTML starter template for Tailwind CSS projects. Learn the essential utility classes for layout, typography, and basic page structure.

#3 Fonts & Colors

Master Tailwind CSS typography and color utilities. Learn font sizes, weights, line heights, letter spacing, and the full color palette system with shades from 50 to 950.

#4 Margin, Padding & Borders

Learn Tailwind CSS spacing utilities for margin and padding, the spacing scale, and border utilities including width, radius, and colors.

#5 Tailwind Config

Understand the tailwind.config.js file in depth. Learn how to customize the theme, extend colors, spacing, and breakpoints, and configure content purging for production.

#6 Custom Fonts

Add custom fonts to your Tailwind CSS project using Google Fonts, local @font-face declarations, and the Tailwind config. Make your designs stand out with custom typography.

#7 Using Flexbox

Master Flexbox layouts with Tailwind CSS. Learn flex direction, wrapping, justify, align, grow, shrink, order, and build practical layouts like navbars and centered content.

#8 Responsive Classes

Learn Tailwind CSS responsive design with mobile-first breakpoints. Master responsive prefixes sm, md, lg, xl, and 2xl to build layouts that adapt to any screen size.

#9 Cards

Build beautiful card components with Tailwind CSS. Learn shadow, rounded corners, overflow, and responsive card grid patterns for product, blog, and profile cards.

#10 Badges

Create badge and pill components with Tailwind CSS. Learn to build status indicators, notification counts, tag labels, and color-coded badges for various UI contexts.

#11 @apply Directive

Learn the Tailwind CSS @apply directive to extract repetitive utility patterns into reusable CSS classes. Understand when to use @apply, when to avoid it, and the @layer directive for organizing styles.

#12 Grids

Master CSS Grid layout with Tailwind CSS utilities. Learn grid columns, rows, gaps, spanning, auto-flow, and build practical grid layouts for dashboards and galleries.