Awesome Tailwind CSS

A curated list of awesome things related to Tailwind CSS

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces.

Contents

• Resources
• Projects Using Tailwind CSS
  • Open Source
  • Apps/Websites
• Tools
• Components & Libraries
• Plugins
• Demos & Samples

Resources

• Tailwind Official Site
• Tailwind Official Repo
• Discussion Repo
• Webpack Starter Project
• Gusts - Tailwind CSS Playground
• Laravel Frontend Preset
• Ruby on Rails Example Project
• Tailwind Components
• Tailwind Themes
• Tailwind Cheat Sheet
• Alfred Workflow - Search Tailwind Docs with Alfred
• ng-tailwindcss - The happy marriage of Tailwind with Angular CLI
• Add Your Item

Projects Using Tailwind CSS

Open Source

• Tailwind Jekyll Starter Kit
• Tailwind Gulp Starket Kit
• Tailwind Fiddle
• Wordpress Tailwindcss + Google PWA
• Create React Native App Tailwind
• Gatsby Starter Tailwind
• Create React App Tailwind
• Jaxli - Feature Request System
• Goodwork - Project Management & Collaboration Tool
• Seminyak Hugo Theme
• Stitches - Website Generator with Tailwind
• Dogpatch - WordPress starter + Webpack, Vue, Babel and Tailwind CSS
• Adds Tailwind CSS to your Ember app or addon
• Add Your Item

Apps/Websites

• Merched.com
• NiftyCo
• Josh Manders
• Matt Stauffer
• Miguel Piedrafita
• Webslides
• Lichter.io (Alexander Lichter)
• Rias
• Freek Van der Herten
• Taylor Bryant
• Oliver Davies
• BaseCode
• Joey Beninghove
• Stefan Bauer
• Jim Shannon
• Eyewitness.io
• Laravel Spark
• Snaptier
• Milan Chheda
• Matheus Lima
• CSS Cursors
• Developmint
• Rational Investment Management
• Stephen Popoola
• Laraboost
• Vince Mitchell
• Marco Mark
• Nehal Hasnayeen
• Plowman Craven
• Erik Campobadal
• Our Name is Mud
• BudgetDuo
• Quickwords
• Ben John Bagley
• The MBR Site
• Natures Finest Pet Supplies Holding Page
• Add Your Item

Tools

• Color shades generator
• Color palette generator
• Zeplin Config & Class generator
• Tailwind CSS IntelliSense for VS Code
• Add Your Item

Components & Libraries

• Convert Bootstrap CSS code to Tailwind CSS code
• Use TailwindCSS with CSS-in-JS
• tails-ui
• Toggle switch
• Add Your Item

Plugins

• Aspect Ratio
• Card
• Fluid
• Flexbox Order
• Spinner
• Transitions - 1
• Transitions - 2
• Transitions - 3
• Bootstrap Tables
• Visually Hidden
• Writing Mode
• Alpha
• Cursor Extended
• Blend Mode
• Object Fit
• Image Rendering
• Text Indent
• Triangle After
• CSS Color Vars
• Responsive Embed
• Object Position
• Accessibility
• Layout
• Gradients - 1
• Gradients - 2
• Typography
• Transforms
• Filters
• Important
• Add Your Item

Demos & Samples

• Tailwind CSS - Building a Login Page
• Rebuilding Laravel.io with Tailwind CSS
• Rebuilding Coinbase with Tailwind CSS - Codepen
• Creating a modal dialog with Tailwind CSS
• Rebuilding FreshBooks with Tailwind CSS
• PingPing - We build a Login using TailwindCSS
• Setting Up Tailwind in a Laravel Project
• How to Build a Vue.js Component With Tailwind in a Laravel Project
• Build a Customizable Vue.js Modal with Tailwind CSS
• Building a Nav with Tailwind CSS
• How to Style a Form With Tailwind CSS
• Building a Photo Gallery With CSS Grid and Tailwind CSS
• Create a Sticky Footer Using Tailwind CSS
• Interactive Tailwind + Vue Responsive Navbar
• Collection of marketing site templates
• Plugin Examples (Official)
• Rebuilding Twitter with Tailwind CSS - CodePen
• Rebuilding YouTube with Tailwind CSS + plugins
• How to Add TailwindCSS to an Ember App
• Laracasts Weekly Stream: Tailwind
• Rebuilding Netlify with Tailwind CSS
• Rebuilding Resolute
• How to setup Tailwind CSS in Sage (WordPress starter theme)
• Add Your Item

Contribute

Contributions welcome! Read the contribution guidelines first.

License