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