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 CSS with Angular CLI
• Tailwind Toolbox - Starter Templates
• Add Your Item

Projects Using Tailwind CSS

Open Source

• Tailwind Jekyll Starter Kit
• Tailwind Gulp Starket Kit
• Tailwind Fiddle
• Wordpress Tailwind CSS + Google PWA
• Create React Native App Tailwind
• Gatsby Starter Tailwind
• Gatsby Tailwind CSS Emotion Starter
• 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
• Create React App + Tailwind CSS + EmotionJS
• Statusfy: Statusfy is a Status Page System, easy to use and completely Open Source.
• 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
• The MBR Site
• Natures Finest Pet Supplies Holding Page
• Peter Fox
• Add Your Item

Tools

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

Components & Libraries

• Convert Bootstrap CSS code to Tailwind CSS code
• Use Tailwind CSS with CSS-in-JS
• tails-ui
• Toggle switch
• Gatsby Plugin Tailwind CSS
• 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
• Scrims
• Grid
• TailwindCSS variables - Transform Tailwind config file to CSS variables.
• Spaced Items - Add fixed margins to all container items except last one.
• 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 Tailwind CSS
• 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 Tailwind CSS 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)
• More experimentation with Tailwind CSS
• Add Your Item

Contribute

Contributions welcome! Read the contribution guidelines first.

License

To the extent possible under law, NiftyCo has waived all copyright and related or neighboring rights to this work.