Master Tailwind CSS: Build 2 Advanced Projects
通过构建两个高级项目掌握Tailwind CSS
Master the latest Tailwind CSS v.3 with project based approach and learn to convert Figma design to Tailwind CSS website
掌握最新的Tailwind CSS v.3与基于项目的方法，并学习将Figma设计转换为Tailwind CSS网站
教程演示🔗
What you’ll learn 你将学习
-
Customize & Configure Tailwind CSS.
自定义和配置Tailwind CSS。 -
Make Ultra responsive designs with Tailwind CSS (RWD).
使用Tailwind CSS（RWD）进行超响应式设计。 -
Write Optimized and Performant Code for Production.
为生产环境编写优化的高性能代码。 -
Apply Dark and Light Mode.
应用黑暗和光明模式。 -
Managing duplication and create reusable styles.
管理重复并创建可重用的样式。 -
Convert Figma design to Real website Using Tailwind CSS
使用Tailwind CSS将Figma设计转换为真实的网站
Requirements 要求
-
Basic HTML and CSS 基本的HTML和CSS
Description 描述
Tailwind CSS is a highly customizable CSS framework which can be used directly in your HTML. No more heavy CSS. it’s designed from the ground up with customization in mind.
Tailwind CSS是一个高度可定制的CSS框架，可以直接在HTML中使用。没有更多的CSS。它的设计是从底层开始的，考虑到了定制。
Why Tailwind CSS? 为什么选择Tailwind CSS？
• Easily customize and configure however you want to.
·轻松自定义和配置，无论你想要的。
• Create unique looking website (this is not the case in Bootstrap).
·创建外观独特的网站（这不是Bootstrap的情况）。
• Utility First ·效用第一
• Faster CSS Styling Process
·更快的CSS样式化过程
• Responsive Design. ·响应式设计。
• Easily used with any frameworks.
·易于与任何框架一起使用。
• Tiny (super fast in production).
·微小（生产中超快）。
• Easily apply Dark Mode and more themes.
·轻松应用黑暗模式和更多主题。
• Beautiful Color Presets.
·美丽的色彩预设。
• Plugins. ·plugins。
• Customization…Customization…Customization.
·产品定制产品展示自定义.
In this course I will take project based approach to teach you the latest Tailwind CSS. we will build 2 beautiful real world production ready websites together. we will see the basics, some of the advanced concepts and techniques to achieve our needs. In these project we will not only see the common designs(like cards, buttons, form inputs…) but we will go beyond and cover how you can make really great designs.
在这个课程中，我将采取基于项目的方法来教你最新的Tailwind CSS。我们将建立2个美丽的真实的世界生产准备网站在一起。我们将看到基本的，一些先进的概念和技术，以实现我们的需求。在这些项目中，我们不仅会看到常见的设计（如卡片，按钮，表单输入.）但我们会更进一步，介绍如何做出真正伟大的设计。
I will update this course regularly when necessary.
我会在必要时定期更新本课程。
What You Will Learn? 你将学到什么？
• Customize & Configure Tailwind CSS.
·自定义和配置Tailwind CSS。
• Write Optimized and Performant Code for Production. ?
·为生产环境编写优化的高性能代码。？
• Make responsive designs with Tailwind CSS (RWD).
·使用Tailwind CSS（RWD）进行响应式设计。
• Apply Dark and Light Mode.
·应用黑暗和光明模式。
• Managing duplication and creating reusable styles.
·管理重复和创建可重用的样式。
• Not only bound to the pre-defined styles but you will learn hot to add and customize your own presets.
·不仅绑定到预定义的样式，而且您将学习如何添加和自定义自己的样式。
• Practically Understand the difference between tailwind CSS and other CSS frameworks like bootstrap.
·实际了解Tailwind CSS和其他CSS框架（如bootstrap）之间的区别。
2 Real World Projects 2个真实的世界项目
We will create 2 real world websites. These projects are open source and free to use.
我们将创建2个真实的世界网站。这些项目是开源的，可以免费使用。
-
Tail Listing – Business and Directory Listing Website
尾列表-业务和目录列表网站 -
Tail Furniture – Furniture Showcase Website (Figma to Tailwind CSS)
Tail Furniture – Furniture Showcase Website（Figma to Tailwind CSS）
Who this course is for:
本课程适用于：
- For anyone with no previous tailwind CSS experience.
对于任何人没有以前的顺风CSS经验。 - For frontend/backend Developers.
对于前端/后端开发人员。 - Already Know Tailwind CSS but want to learn more and build projects.
已经知道Tailwind CSS，但想学习更多并构建项目。 - Anyone who want to learn and work with Tailwind CSS.
任何想学习和使用Tailwind CSS的人。
