Modern Web Design with Tailwind CSS 4 is a course in designing websites with the utility-first Tailwind CSS 4, from setting it up with Vite and CSS-first configuration with @theme to responsive layouts, container queries, dark mode and animation. It suits UX/UI designers and front-end developers, and you leave with a mobile-friendly landing page and admin dashboard.
Web design today has to look good, work on every screen size, load quickly and be easy for a team to keep editing. Writing all the CSS by hand often ends in long files nobody dares to touch, while component-based CSS frameworks make sites look alike and are hard to customise. That is why Tailwind CSS has become so popular: it gives designers full freedom through utility classes, with almost no hand-written CSS, and generates only the CSS that is actually used.
This course designs websites with the current Tailwind CSS 4. Learners set it up with Vite using @tailwindcss/vite and @import "tailwindcss", work with utility classes for spacing, typography, colour and layout with Flexbox and Grid, use state variants, build mobile-first responsive layouts and container queries, and create a landing page. The second day sets up design tokens the CSS-first way with @theme, creates custom utilities and variants, adds dark mode, transitions and animation, builds an admin dashboard template and organises components so a team can maintain them. It closes with building for production, upgrading projects from v3 and deploying online. (2 days, 6 hours per day, 12 hours in total, Beginner to Intermediate level.)
Course Details
This course is the 2026 edition of the previous Modern Web Design with Tailwind CSS 4.0 course, updated for the latest Tailwind CSS 4 release. It runs for 2 days, 6 hours per day (12 hours in total, 09:00-16:00), as lectures with labs and workshops that build a landing page and an admin dashboard template. Beginner to Intermediate level. This edition adds container queries, @utility, @custom-variant, dark mode, organising components for teams, and upgrading projects from v3 with the official tool. It builds on basic HTML and CSS, such as Basic HTML+CSS, so it does not repeat CSS fundamentals. Learners take home a lab guide, starter files and solution code for both projects.
Section 1: Lab: Getting to Know and Installing Tailwind CSS 4
Section 2: Everyday Utility Classes
Section 3: Lab: Layout with Flexbox and Grid
Section 4: State Variants and Responsive Design
Section 5: Workshop: A Responsive Landing Page
Section 6: Lab: CSS-first Configuration
Section 7: Dark Mode, Transitions and Animation
Section 8: Workshop: An Admin Dashboard Template
Section 9: Organising Components a Team Can Maintain
Section 10: Lab: Build, Upgrade and Deploy
No public rounds are open right now. Join the waiting list and we will contact you first when the next round opens, or ask us on LINE. Or call 02-570-8449 or 088-807-9770
Tailwind CSS 4 has a new engine that builds much faster and moves to CSS-first configuration: you start with @import "tailwindcss" in your CSS file and define colours, fonts and breakpoints inside @theme instead of tailwind.config.js. Those values become CSS variables you can reuse directly, source files are detected automatically, and container queries are built in without an extra plugin. Minor 4.x releases continue to add new utilities.
Tailwind is mobile first: unprefixed classes apply at every screen size, while prefixes such as md: or lg: take effect from that width upwards. Design the phone layout first and add larger-screen changes, for example grid-cols-1 md:grid-cols-3. Use max-md: for styles that apply only below a breakpoint, add your own breakpoints with --breakpoint-* variables in @theme, and use @container when a component should adapt to its own space.
A typical landing page starts with navigation, followed by a hero section that states the main offer with a call-to-action button, a features section summarising key points, a testimonials or showcase section, a pricing or plans section, and a footer with contact links. Every section should display well on phones. This course builds each one with Tailwind CSS 4.
It suits UX/UI designers, front-end developers, people currently using Bootstrap or Tailwind v3, and general learners who want to design websites with Tailwind CSS. You should be able to write basic HTML and CSS and run npm commands in a terminal. No previous experience with Tailwind CSS or any CSS framework is needed.
You will be able to design responsive sites fluently with Tailwind CSS 4, use container queries, set up a brand theme with @theme, add dark mode, transitions and animation, build a landing page and an admin dashboard template with login, register and sidebar, upgrade projects from v3, and deploy to GitHub Pages or Netlify yourself.
You write code in VS Code with Tailwind CSS IntelliSense and Prettier, use Node.js and Vite to create projects, install Tailwind CSS 4 through @tailwindcss/vite, and practise publishing on GitHub Pages or Netlify. All of these tools are open source or free.
Articles are published in Thai.
Every major browser now supports HTML and CSS features that used to need JavaScript or third-party libraries: forms that validate themselves, dialogs and popovers, styling based on what an element contains with :has(), components that adapt to the space they…
Every website we open today, whatever tool or framework built it, ends up in the browser as HTML and CSS. People who understand these two languages can edit pages, adapt templates and talk to development teams with confidence. Yet many beginners learn from…
A good web page needs a sound structure, works well on both phones and computers, and looks appealing. HTML5 and CSS can do more on their own than many people expect, from forms that check their own input and videos with captions to gradients, shadows and…
