When you enroll through our links, we may earn a small commission—at no extra cost to you. This helps keep our platform free and inspires us to add more value.

Development
SkillShare logo

Tailwind CSS Fundamentals

Unlock creativity with Skillshare! Learn acrylic painting, AI writing, graphic design, and photography.

     
  • 4.5
    •  |
  • Reviews ( 115 )
Free
Tailwind CSS Fundamentals

Related Courses

This Course Includes

  • iconskillshare
  • icon4.5 (115 reviews )
  • icon2 hours 0 minutes
  • iconenglish
  • iconOnline - Self Paced
  • iconcourse
  • iconSkillShare

About Tailwind CSS Fundamentals

Presentation

What Is Tailwind CSS and What Is It Used For?

Quick Prototypes: Introduction

Tailwind Play: a Complete Online Editor

Play CDN: Tailwind CSS in Your Editor Without Installing Anything

Installing Tailwind CSS: Introduction

Standalone CLI: Installing Without Node.js

Installing Node.js

Tailwind CLI: Standard Installation

With PostCSS: Complete Installation

Integration with Frameworks

Configuring Visual Studio Code

Integrating with Other Editors

Building a Web Page from Scratch: Introduction

Installing Tailwind CSS

Mobile Version

Responsive Version

Applying CSS States

Adding Dark Mode

Reusing Classes

Plugins: Introduction

Using the Typography Plugin

Using the Forms Plugin

Adding a list of movies and series

Using the Line Clamp Utility

An Overview of Advanced Concepts

Next Steps

What You Will Learn?

  • You will learn about Tailwind CSS, the CSS framework that is changing how you work with CSS. You will discover and experience what makes it different from others..
  • This class will save you the work of study and research, and you will learn the basics from scratch to build any website you set your mind to..
  • Learn how to use Tailwind CSS in this comprehensive class..
  • Adapt the page to different screen sizes (responsive design).
  • Apply CSS states.
  • Design a dark mode.
  • Reuse your styles (don't repeat yourself principle).
  • Learn how to install and use plugins.
  • You will build a landing page for a Netflix-like website using the Tailwind CSS utility classes as a class project. You will improve and complete it step by step..
  • Class overview:.
  • You will see all the ways to install and configure Tailwind CSS, including ways to make quick prototypes..
  • Configuring Visual Studio Code, and I will show you the plugins I use to work comfortably..
  • Installing Tailwind CSS and its dependencies, getting everything ready to start working..
  • Building a Netflix-like landing page with a mobile-first approach..
  • Adapting the page to different screen sizes, known as responsive design..
  • Adding CSS states, such as when you hover the mouse over a button..
  • Configuring your page with an automatic dark mode..
  • Creating custom classes that you can reuse, to avoid repeating code..
  • You will also control the official Tailwind CSS plugins:.
  • Typography: to style texts (for example, those coming from a database)..
  • Forms: for styling forms.
  • Line-Clamp : to limit text and achieve visual harmony (now built-in).
  • In addition:.
  • After each module of lessons, you will take a quiz to check that you haven't missed anything important..
  • I will add more content regularly. You also have access to the repository where I publish the pages' source code..
  • With this class you will have a good foundation to build any page you set your mind to, with clear and practical lessons..
  • If you haven't decided yet, you can watch for free some lessons..
  • And of course, if you have any questions, you can post them in the questions and answers section, where I will answer them..
  • See you inside!.