This comprehensive tutorial provides a beginner-friendly, all-in-one guide to Tailwind CSS, covering setup, core concepts, and practical application through building a complete website. The course is structured into five chapters, progressively building knowledge and skills in using Tailwind CSS for modern web development.
Chapter 1: Introduction & Tailwind CSS Setup (00:00:51 - 00:22:25)
nodejs.org (recommended version).node -v in the terminal.Ctrl + or Terminal > New Terminal).npx tailwindcss init. This creates tailwind.config.js.build and src.index.html in the build directory.
! + Tab for HTML boilerplate.tailwind.config.js:
content array: ['./build/*.html'].input.css in the src directory.
@tailwind base;, @tailwind components;, @tailwind utilities;.npx tailwindcss -i ./src/input.css -o ./build/css/style.css --watch.--watch flag automatically recompiles CSS on file changes.style.css in index.html: <link rel="stylesheet" href="./css/style.css">. (Note: Ensure the path is correct relative to index.html).bg-emerald-500, w-52, h-52, rounded-full, shadow-2xl).min-h-screen on body for full viewport height.grid, place-items-center (or grid place-content-center) to the parent element for centering.Chapter 2: Project Header, Hero & Cards (01:08:48 - 01:45:52)
build directory: Contains index.html, css/style.css, img/ (for images).src directory: Contains input.css.tailwind.config.js (root).package.json (root): For managing scripts and dependencies.
tailwind and prettier.prettier-plugin-tailwindcss as a dev dependency..gitignore: Added node_modules/ to prevent committing unnecessary files.header element with classes: bg-tl-700, text-white, sticky, top-0, z-10.section element inside the header for content: max-w-4xl, mx-auto, p-4, flex, justify-between, items-center.button with ID hamburger-button) using HTML entity ☰.nav element) with classes: hidden, sm:block (shows on small screens and up), space-x-8, text-xl.a tags) with href attributes linking to sections (#rockets, #testimonials, #contact) and hover:opacity-90 class.section with ID hero.flex, flex-col, justify-center, sm:flex-row, p-6, items-center, gap-8, mb-12.flex-col (mobile) and sm:flex-row (small screens and up).h2 element for the main slogan with classes for sizing, weight, alignment, and responsive text.span element for highlighting specific words using text-indigo-700 and dark:text-indigo-300.p elements for the main text, with responsive alignment and color variations for dark mode.section with ID rockets.h2 for the section title.ul element for the cards with list-none, mx-auto, my-12, flex, flex-col, sm:flex-row, items-center, gap-8.li elements for each card: flex, flex-col, items-center, border, border-solid, border-slate-900, dark:border-gray-100, bg-white, rounded-3xl, p-6, px-2, shadow-xl.img element for the rocket image (w-full, sm:w-1/2, lg:w-2/3).h3 for the rocket name and p for the description.hr element with classes mx-auto, bg-black, dark:bg-white, w-1/2.section with ID testimonials.figure element with my-12 class.blockquote element with styling for background, padding, rounded corners, and relative positioning.
::before, ::after): Used for styling the quote marks using arbitrary values for content, font, position, size, and transform.p element for the testimonial text.figcaption for the author's name and title.section with ID contact.h2 for the section title.form element with classes: max-w-4xl, mx-auto, text-2xl, sm:text-3xl, flex, flex-col, items-start, gap-4.label and input elements for "Subject" and "Message".
id, name, required, minlength, maxlength, placeholder.w-full, text-black, text-2xl, sm:text-3xl, p-3, rounded-xl, border, border-solid, border-slate-900, dark:border-gray-100.button element for submission with classes for background, hover, active states, text color, padding, width, rounded corners, and border.footer element with classes: bg-tl-700, text-white, text-xl.section inside footer for content: max-w-4xl, mx-auto, p-4, flex, flex-col, sm:flex-row, items-center, gap-4, sm:justify-between.address, h2, and p tags.nav element) using hidden, md:block (shows on medium screens and up), flex, flex-col, items-center, gap-2.©) and a dynamically updated year (using JavaScript in a real project).tailwind.config.js (wideScreen, tallScreen) based on aspect ratio.section-min-h-screen class with these media queries to ensure sections take up full viewport height on specific screen sizes.Chapter 3: Pseudo-Classes, Forms & Footer (01:45:52 - 02:33:28)
button with ID hamburger-button.X) for this variation.relative, w-8, h-1, bg-white, rounded.::before, ::after) for the hamburger lines using content-[''], before:absolute, before:top-4, before:left-0 (adjusted for centering), before:bg-white, before:w-8, before:h-1, before:rounded, before:transition-all, before:duration-500, before:-translate-y-4.::after pseudo-element, with a negative translate-y for the top line and a positive translate-y for the bottom line.div itself, styled as transparent.section with ID mobile-menu.absolute, top-68-px (adjusted for header height), bg-black, w-full, h-screen, text-5xl, flex, flex-col, justify-center, items-center, text-white, hidden.document.getElementById.initApp function to initialize event listeners.toggleMenu function to toggle hidden and flex classes on the mobile menu and the toggle-button class on the hamburger button.click on the hamburger button and the mobile menu itself (to close the menu).DOMContentLoaded event listener to ensure the DOM is loaded before running initApp.main.js) in index.html using <script src="../js/main.js" defer></script>.build/js/*.js) to tailwind.config.js content array to ensure classes used in JavaScript are processed.tailwind.config.js (@keyframes open-menu) for scaling and rotation.animate-open-menu class to the hamburger button's pseudo-elements for animation.prettier-plugin-tailwindcss.package.json for formatting HTML files (prettier --write "**/*.html").npm run prettier automatically organizes class order and indents code.Chapter 4: Animated Mobile Menu & Hamburger Icon (02:33:28 - 02:33:28)
#hamburger-button) and mobile menu (#mobile-menu) elements selected via JavaScript.toggleMenu function handles adding/removing hidden and flex classes.toggle-button class (via JavaScript) on the hamburger button triggers CSS animations for the icon transformation (lines to 'X').scale-y and translate-y keyframes defined in Tailwind config.@keyframes open-menu) defined in tailwind.config.js for a bouncing effect (scale-y, rotate).animate-open-menu class applied to the hamburger icon's pseudo-elements.rotate animation added to the middle bar of the hamburger icon.hidden and flex toggling logic to a single toggleMenu function.transform-origin, transition, and animate utilities for smooth visual effects.Chapter 5: Theme Config & Deploy to the Web (02:33:28 - 03:00:19)
tailwind.config.js):
wideScreen and tallScreen based on aspect ratio for more precise responsive control.[] to apply specific CSS values not predefined in Tailwind (e.g., top-[68px], rotate-[45deg]).git init).git add .).git commit -m "message").git push).render.com.build directory as the publish directory.build directory for deployment.npm run prettier for consistent code formatting and class ordering.[] to specify custom values not included in the default Tailwind theme.::before, ::after).sm:, md: prefixes).tailwind.config.js.@apply Directive: Used within custom CSS to apply Tailwind utility classes.tailwind.config.js for theme customization and extending functionalities.sm:, md:, lg:, etc.) and custom media queries.render.com to easily deploy static websites.wideScreen and tallScreen be defined within the tailwind.config.js file?at apply directive in CSS and how does it relate to Tailwind CSS?