Tailwind CSS – 轻松构建一个 Tailwind CSS 音乐节网站,并构建自定义的 Tailwind 插件、组件等!
你将会学到的
提升你作为前端网页开发者的价值。
使用 Tailwind CSS 构建一个着陆页。
创建自定义的 Tailwind CSS 插件。
扩展默认的 Tailwind CSS 主题。
使用 Tailwind CSS 创建自定义动画。
要求
对 HTML 与 CSS 有基本的理解。
已安装 Node.js 和 npm 的最新版本。
说明
通过深入学习 Tailwind CSS,提升你的技能并增加你作为前端网页开发者的价值!
Tailwind CSS 是一款实用程序优先的 CSS 框架,内置了诸如 flex、pt-4、text-center 和 rotate-90 等类,可以直接在你的标记中组合使用,构建任意设计。从此,你无需再绞尽脑汁思考合适的类名,无需再创建繁琐的包裹类和内部类,也不必因庞大的 CSS 文件浪费资源。Tailwind CSS 让设计构建变得异常快速和简单,而且还自带优化功能。如果你的 HTML 文件中没有使用某个特定的类,那么 Tailwind CSS 就不会在最终构建的 CSS 中包含它!
课程内容
在这门课程中,我们将创建一个移动优先的音乐节网站着陆页。我们会覆盖使用 flexbox 和 grid 进行布局,Hero 和 Navbar 组件及其菜单和子菜单项,针对 hover 和 focus 等不同状态的目标定位,针对不同屏幕尺寸的设计,以及超越 Tailwind 内置主题和类的自定义扩展。
课程收获
在熟悉了 Tailwind CSS 的实用程序类之后,我们将创建自己的基础类、实用程序类和组件类,甚至编写我们自己的 Tailwind CSS 插件!尽管课程时间紧凑,但其中蕴含了巨大的价值!
行动呼吁
今天就开始学习吧,通过使用 Tailwind CSS 这种更为先进的网页样式化方式,提升你作为前端网页开发者的价值。无论你是希望提升个人项目质量,还是寻求在职业道路上迈出更大步伐,掌握 Tailwind CSS 都将为你的技能集添砖加瓦,让你在前端开发领域更具竞争力。
此课程面向哪些人
各级别的网页开发者,希望通过学习一种更为先进的样式化方法来提升自己在应用程序和网站设计上的价值。