Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Master Tailwind CSS: Build 2 Advanced Projects
Rating: 4.2 out of 5(70 ratings)
8,250 students

Master Tailwind CSS: Build 2 Advanced Projects

Master the latest Tailwind CSS v.3 with project based approach and learn to convert Figma design to Tailwind CSS website
Created byZekaryas Yohannes
Last updated 2/2023
English

What you'll learn

  • Customize & Configure Tailwind CSS.
  • Make Ultra responsive designs with 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

Course content

5 sections • 23 lectures • 3h 35m total length

  • Welcome and Introduction4:16

    Build two advanced tailwind css projects, including a business listing site and a furniture site; convert figma designs, apply utilities, ensure responsive layouts, and optimize performance.

  • Intro to Tailwind CSS2:01

    Explore Tailwind CSS's utility-first approach, its full customization options, framework compatibility, dark mode, and color presets across React, Angular, and Blade templates.

  • Installation and setup5:03

    Follow the official Tailwind CSS installation guide to install via npm, set up a project template, configure inputs and outputs, and verify the setup in the browser.

  • Customize and Configure6:18

    Learn to configure and customize Tailwind CSS from the ground up. Extend or override defaults, tailor colors, fonts, spacing, and plugins, and manage prefixes and other appearance settings.

Requirements

  • Basic HTML and 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.

Why Tailwind CSS?

• Easily customize and configure however you want to.

• Create unique looking website (this is not the case in Bootstrap).

• Utility First

• Faster CSS Styling Process

• Responsive Design.

• Easily used with any frameworks.

• Tiny (super fast in production).

• Easily apply Dark Mode and more themes.

• Beautiful Color Presets.

• 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.

I will update this course regularly when necessary.


What You Will Learn?

• Customize & Configure Tailwind CSS.

• Write Optimized and Performant Code for Production. ?

• Make responsive designs with 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.


2 Real World Projects

We will create 2 real world websites. These projects are open source and free to use.

  1. Tail Listing - Business and Directory Listing Website

  2. Tail Furniture - Furniture Showcase Website (Figma to Tailwind CSS)

Who this course is for:

  • For anyone with no previous tailwind CSS experience.
  • For frontend/backend Developers.
  • Already Know Tailwind CSS but want to learn more and build projects.
  • Anyone who want to learn and work with Tailwind CSS.

Report abuse