Using Tailwind CSS with
HTML
Mastering Utility-First Styling
Instructor: Samuel Kapansa
What is Tailwind CSS?
A utility-first CSS framework that provides low-level utility classes to speed up styling without writing custom CSS, allowing
developers to style directly within their HTML.
Utility-First Approach Rapid Development Highly Configurable
Forget traditional CSS. Tailwind Build custom designs quickly Tailwind can be tailored to your
provides atomic classes directly in without leaving your HTML files. project's specific design system.
your markup.
Why Use Tailwind CSS?
Fast Development Workflow: Eliminate context switching
by styling directly in HTML.
Highly Customisable: Tailor your design system with ease,
using a tailwind.config.js file.
No More CSS from Scratch: Focus on structure and
functionality, not repetitive CSS rules.
Scalable: Perfect for both small prototypes and large-scale
applications due to its consistent approach.
How to Add Tailwind to Your HTML Project
Option 1: CDN (Quick Start)
For quick prototyping or small projects, simply add the following script to your HTML <head> section:
<script src="https://cdn.tailwindcss.com"></script>
This method is great for learning, but for production environments, consider using the PostCSS setup for better
performance and customisation.
Tailwind Syntax Basics
Tailwind CSS classes are added directly to HTML elements, allowing for rapid styling without traditional CSS files.
<h1 class="text-3xl font-bold text-blue-600">Hello World</h1>
text-3xl: Sets the font size to 1.875rem (30px).
font-bold: Applies bold font weight.
text-blue-600: Sets the text colour to a specific shade of blue.
Common Tailwind Utilities
Text Styling Layout Control
text-lg: Large text flex: Flexbox container
font-semibold: Semi-bold font grid: Grid container
text-red-500: Red text items-center: Align items to centre
justify-between: Space between items
Spacing Colours & Borders
p-4: 1rem padding all sides bg-blue-100: Light blue background
m-2: 0.5rem margin all sides text-gray-700: Dark grey text
gap-6: 1.5rem gap between grid/flex items rounded-lg: Large border radius
shadow-md: Medium box shadow
Responsive Design with Tailwind
Tailwind CSS makes creating responsive designs straightforward with its intuitive, mobile-first breakpoints.
<div class="text-sm md:text-lg lg:text-xl">Responsive Text</div>
1 2
Small Screens (sm:) Medium Screens (md:)
Styles apply from 640px and up. Styles apply from 768px and up.
3 4
Large Screens (lg:) Extra Large Screens (xl:)
Styles apply from 1024px and up. Styles apply from 1280px and up.
Reusability with Components
While Tailwind is utility-first, you can still achieve reusability by grouping classes into reusable HTML snippets or using dedicated
Tailwind plugins.
Manual Reusability Tailwind Plugins
Create simple HTML partials or templates for common UI Leverage Tailwind's plugin system to create custom
elements like cards, buttons, or navigation bars. For example: components and utilities. This is ideal for abstracting complex
class sets into semantic names.
<!-- button.html -->
<button class="bg-blue-500 hover:bg-blue-700 text-
Use @apply in your CSS to combine multiple
white font-bold py-2 px-4 rounded">
Tailwind classes into a single custom class.
Click Me
</button>
Practice Activity
Task: Create a Profile Card using
Tailwind CSS
Apply what you've learned to build a simple profile card. Focus on the
following utility classes:
Layout: flex, items-center, gap-4
Text: text-xl, font-bold, text-gray-800
Spacing: p-6, m-4
Colours & Borders: bg-white, shadow-lg, rounded-xl, border
Responsive: Use md: or lg: prefixes to adjust layout or text size on
larger screens.
Summary
Utility-First Styling Streamlined Workflow
Tailwind CSS revolutionises styling by providing atomic Significantly speeds up development by eliminating the
utility classes directly in your HTML. need to write custom CSS from scratch.
Effortless Responsiveness Consistency & Reusability
Built-in responsive prefixes simplify creating adaptable Promotes a consistent design system and allows for
layouts for various screen sizes. intelligent reusability of components.