Design with Tailwind CSS Masterclass

使用完全定制的设计来构建Web应用程序是一项艰巨的任务。如果您不是CSS专家，则在尝试调整像素，对齐元素并在桌子上沮丧地敲打头时，将设计样式应用于标记可能会耗费大量时间。

有选择。您可以使用功能强大的CSS框架（如Bootstrap）来帮助您构建应用。但是，开箱即用，您最终会构建一个人们会看到的应用程序，并说：“嘿，不错的Bootstrap应用程序。”

因此，如果您想要完全自定义的设计，请返回步骤1。

有中间的方法。这种方法使您可以自由地应用自定义设计，但是可以大大简化CSS，从而为您提供核心功能，而无需对应用程序进行严格的设计。

这是Tailwind，这是实用程序优先的CSS框架，用于快速构建自定义用户界面。

使用Tailwind CSS进行设计是一个系列，该课程教您如何使用Tailwind CSS从头开始构建完全响应，专业设计的UI。

我们将共同构建一个物业租赁应用程序Workcation，其中载有有趣的详细信息，可帮助您立即掌握Tailwind。

Building your web app with a fully customized design is a daunting task. If you aren’t a CSS expert, applying a design style to your markup can consume hours and hours as you try to tweak pixels, align elements, and bang your head on the desk in frustration.

There are options. You can turn to a full-blown CSS framework like Bootstrap to help build your app. But, out of the box, you end up building an app that people will look at and say, “Hey there, nice Bootstrap app.”

So if you want a fully custom design, you are back at step 1.

There’s a middle way. An approach that gives you the freedom to apply your custom design, but in a way that greatly simplifies the CSS, providing you with core functionality without applying heavily opinionated design to your app.

This is Tailwind, a utility-first CSS framework for rapidly building custom user interfaces.

Design with Tailwind CSS is a series that teaches you how to build fully responsive, professionally designed UIs from scratch using Tailwind CSS.

Together we’ll build Workcation, a property rental app loaded with interesting details that will help you master Tailwind in no time.

Duration: 3h 4m | Video: .MP4 1280×720, 25fps(r) | Audio: AAC, 44100Hz, 2ch | Size: 1.23 GB
Genre: eLearning | Language: English

What you’ll learn
Get Tailwind CSS up and running in your project
Build complex application layouts with flexbox
Build accessible user interfaces following industry best practices
Remove unused CSS from production builds to maximum performance
Use responsive utility variants to build adaptive user interfaces
Use utilities to style elements on hover, focus, and other states
Extend Tailwind with custom utility classes
Work with Tailwind CSS plugins
Customize Tailwind CSS to meet the needs of your design
Augment Tailwind CSS with JavaScript to make your designs interactive

Quick Facts
Utility classes create an API on top of what is already a declarative API (CSS itself)
Every utility class is reusable so you rarely need to write new CSS
Tailwind CSS makes easier to maintain a large CSS codebase
Tailwind CSS uses a mobile first breakpoint system
Tailwind CSS is component-driven
Tailwind CSS is single source of truth for your CSS architecture

Questions to Reflect Upon:
How do you build visually consistent UIs?
What are the best practices for implementing design systems?
What makes a project maintainable?
How much design CSS do I need to know?