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 sleek designs without any annoying opinionated styles you have to fight to override.
Table of Contents
- Designing with Tailwind CSS – Tailwind CSS is a framework for designing user interfaces, and its creator has released a free video series that teaches viewers how to build fully responsive, professional-looking UIs from the ground up. Each video in the series covers a different aspect of using Tailwind CSS, such as how to create components, how to set up responsive breakpoints, and how to customize the design of your UIs. By the end of the series, viewers will be able to create beautiful, responsive UIs with Tailwind CSS.
- 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 to make a beautiful contact form.
- Tailwind CSS From Scratch – This course will teach you how to use Tailwind CSS to create and edit great-looking layouts quickly and efficiently. You will learn the Tailwind utility classes in a code sandbox and build five mini-projects and six website projects. You will also learn how to set up a development environment using the Tailwind CLI and configure your styles to create custom layouts.
Starter Kits / UI Libraries
- tailblocks – This library contains ready-to-use Tailwind CSS blocks in 15 different categories (e-commerce, 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 Bootstrap) 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.