Craft Scalable, Custom-Made Interfaces with Tailwind CSS

You’ll learn the fundamentals of styling a modern web application using Tailwind CSS's utility classes, as well as some tips and tricks for integrating it with component-based frameworks like React and Vue.
Functional CSS has been growing in popularity, and for good reason: it allows developers to build truly custom user interfaces without using any messy tweaks or overrides that have plagued existing tools like Bootstrap for years.
When it comes to Functional CSS libraries, Tailwind is the reigning champ. By several measures, it’s one of the hottest pieces of tech right now in all of frontend web development. Its APIs make developers feel incredibly productive, and because it's just a set of well-thought-out CSS classes, you can use it entirely from within your HTML templates or render functions without having to learn any new tooling, or even opening up a separate file.
If you're a web developer interested in front-end design and development, you owe it to yourself to give Tailwind a try, if only to not miss out on one of the biggest new trends in our industry.
The Course Project
Throughout this course, you will build a Discord app clone down to the padding, hover effects, and colors that are found in the application's UI.
Doing so will give you a few things:
You'll learn the Tailwind workflow
How to customize Tailwind to an application
Be exposed to the design decisions of a professional team
Recognize patterns in design as you build an interface
Walk away with great looking components you can take to your other applications
After this course, pick an application -- this could be Gmail or Slack, for instance -- and clone the UI to test the knowledge you've gained
Tailwind Workflow
In Tailwind, you'll learn to adopt a 'tinkering' workflow. Because classes are so easy to adjust and compose together, you have the ability to incrementally find the design that works for you. Adjusting colors, padding, and margin on the fly is easy!
As you get comfortable with this workflow, you'll notice you are duplicating classes quite a bit. This is by design! The friction to apply and compose classes is so small that it doesn't matter that you have a bit of duplication in your code.
As you start seeing more and more duplication, you can remove that abstract that duplication away at the component level rather than the CSS level.
Get a taste of that workflow in: Intro to Styling Custom UIs with Tailwind Utility Classes
Gain these Skills
After taking this course you will be able to start a greenfield project and feel comfortable implementing custom-made user interfaces with any design that's handed to you.
You will understand how to use Tailwind's general-purpose utilities to control things like layout and spacing, while also feeling capable enough to customize the more opinionated style tokens to make your designs match whatever look and feel that you want.
What's Next?
When you are using Tailwind you are not writing a single line of CSS, however, to be able to understand and implement tailwind's utility classes you need a strong knowledge of CSS itself, with that said, if you need to review some of the concepts on CSS these courses are a great starting point → Flexbox Fundamentals & Build Modern Layouts with CSS Grid
Now that you have the knowledge on how to use and implement Tailwind class utilities to control the style and design of the interface, you can start a new project from scratch where you applied all of that knowledge. A perfect way to start is by creating your own digital garden → Architect an Extensible Digital Garden with Next.js, Tailwind, and Nx

• Intro to Styling Custom UIs with Tailwind Utility Classes
• Scaffolding a Multi-Panel App Layout with Flexbox
• Making Panels Scrollable with Flexbox
• Customizing Tailwind’s Color Palette With Your Brand
• Adding Custom Fonts to Tailwind
• Building a Hoverable Server Selector With SVG
• Transitioning Rounded Corners using the JIT Compiler
• Conditionally Applying Classes Based on the Active URL
• Building the Active Server Indicator using Group and Transform Utilities
• Solving the Duplication Problem with Components
• Building the Server Header using Arbitrary Values from the JIT Compiler
• Styling the Channel List and Controlling Layout
• Identifying Repeated Patterns while Dynamically Generating the Channel List
• Styling the Active Channel Link with a New Dynamic URL Segment
• Using a State Variable to Add Unread States to the Channel Nav
• Building Collapsible Categories with Rotating Arrow Icons
• Building the Channel Header with Flexbox Shrink and Truncating Text
• Styling the Search Box Using the Forms Plugin
• Using Components to Dynamically Generate the Channel's Messages
• Dynamically Generating the Server and Channel Navs
• Using Responsive Design to Hide the Desktop Navigation