Best Resources to Learn Tailwind CSS

Tailwind CSS is a low-level CSS framework that is highly customizable. It offers you all of the building blocks you need to create beautiful and slek designs without any annoying opinionated styles you have to fight to override.

Tutorials

  • Designing with Tailwind CSS – The creator of the framework brings you these screencasts. This is a free video series that teaches you how to build fully responsive, professionally designed UIs from scratch using Tailwind CSS.
  • Composing CSS Utility Classes – Throughout the lessons, you’ll discover how to use Tailwind and compose utility classes together like building blocks. You’ll also learn how to make your own version of Tailwind by modifying the JavaScript configuration file
  • Web Development Made Easy With Tailwind Css – This is a free 2-hour course about using Tailwind CSS for web development.
  • Learn Tailwind CSS for free – This course contains 23 interactive screencasts. They will teach how to use Tailwind from scratch, using a mix of lectures and interactive coding challenges.
  • Create a beautiful contact form – This 43 minutes course will teach you how to use Tailwind yo make a beautiful contact form.

Starter Kits / UI Libraries

  • tailblocks – This library contains ready-to-use Tailwind CSS blocks in 15 different categories (ecommerce, blog, pricing and more…). They support both dark and light mode with color variations.
  • Tailwind Starter Kit – Tailwind Starter Kit is Free and Open Source. It does not change or add any CSS to the already one from TailwindCSS. It features multiple HTML elements and it comes with dynamic components for ReactJS, Vue and Angular.
  • tails-ui – This is a react UI library using Tailwind CSS. You can find components such as Alert, Article, Box, Breadcrumbs, Button, Card, etc…
  • VueTailwind – VueTailwind is a set of Vue components created to be customized to adapt to the unique design of your application.
  • Tailwind Templates – This site is an open source project providing collections of templates & components for rapid UI Development using Tailwind CSS.
  • vite-tailwind-starter – Starter using Vite + Tailwind for super fast prototyping

Tools / Plugins

  • Tailwindo – This tool can convert Your CSS framework (currently Boostrap) classes in HTML/PHP (any of your choice) files to equivalent Tailwind CSS classes.
  • Stitches – Generate tailwind code with a list of pre-defined templates.
  • Tailwind color shades generator – Create shades using a color picker.
  • Tailwind Gradient Designer – Generate gradient color classes for Tailwind.
  • Tailwind Colors – Color configuration generator.
  • Tailwind CSS Figma Kit – Figma Kit for Tailwind CSS.
  • RustyWind – CLI for organizing Tailwind CSS classes.
  • Tailwind Config Viewer – Tailwind Config Viewer is a local UI tool for visualizing your Tailwind CSS configuration file. Keep it open during development to quickly reference custom Tailwind values/classes.
  • Typography – This is a Tailwind CSS plugin to generate typography utilities and text style components.

Leave a Comment

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close