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
• Tailwind UI
• Discussion Repo
• Webpack Starter Project
• Gusts: Tailwind CSS Playground
• Laravel Frontend Preset
• Ruby on Rails Example Project
• Tailwind Components
• 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
• Tailwind Templates
• Laravel Dark Tailwind Preset
• Testing Tailwind CSS plugins with Jest
• vue-cli-plugin-tailwind: Tailwind for Vue CLI Projects
• Tailwind Figma Kit
• Tailwindcss Cheatsheet
• Tailwind setup with Webpack4 and PostCSS
• tailwind.run: Tailwind CSS Fiddle with built-time features
• Add Your Item

Projects Using Tailwind CSS

Open Source

• Jekyll Tailwind Starter
• 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.
• Todolist: Laravel, Vue and Tailwind CSS
• Create React App, included with TailwindCSS and PurgeCSS
• Admin Panel Built On Tailwind
• react-native-tailwindcss
• Hugo Starter Theme with Tailwindcss
• Tailwind Next.js Starter
• Sapper & Svelte Tailwind Starter
• Netlify Lambda Tailwind Static Starter
• Gatsby Starter Theme: Serif
• Add Your Item

Apps/Websites

• Merched.com
• NiftyCo
• Josh Manders
• Matt Stauffer
• Miguel Piedrafita
• Blogcast
• 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
• Peter Fox
• Martin Williams
• Brahms Electric Hearses
• Crypto Contributors
• Sjabloon
• Guillaume Briday
• Hello Sun
• Onur Şuyalçınkaya
• Faruno: A unique email address for every service you use within one inbox
• University of West London
• OpenEmu
• Alice's Magical Maze
• sleeplessmind.info
• The Speedcube Site
• Woburn Mosaic
• Hunsbury Hot Tubs
• DigitalDam: Automated backup/snapshot scheduling for DigitalOcean droplets.
• SlidesGo: Free Google Slides and Powerpoint templates to boost your presentations.
• BuildPulse: A GitHub app helping you win the fight against flaky builds.
• ScrumGenius: Automate daily standups on Slack and Microsoft Teams
• 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
• Tailwind CSS IntelliSense for (neo)vim
• Tailwind Button Playground
• Tailupgrade : Convert HTML files with tailwind V.0.x class name into stable version V.1.x
• Tailwind Colors: Generate color configuration for Tailwind v1.x.
• Tailwind CSS Figma Plugin: Tailwind CSS integration for Figma
• Tailwind Automatic Prefix Applicator: Adds a prefix to tailwind vanilla classes
• 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
• Pagination Template For Laravel
• Shift to the next Tailwind CSS version hassle-free
• VueTailwind: A set of vue components with configurable classes
• Add Your Item

Plugins

• Custom Forms (Official) - A better base for styling form elements with Tailwind CSS.
• 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
• Border Gradients
• 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.
• Heropatterns - Streamlined integration between tailwindcss and heropatterns
• Caret Color - Coloring carets with tailwindcss colors
• Direction - RTL & LTR direction variants for Tailwind.
• Touch - Additional variants for touch based media queries.
• Elevation - Elevation classes taken from Material Components.
• Localized - Variant for utilities based on site language.
• Skip link - Adds an accessible 'skip to main content' link
• List Reset - Re-adds the list-reset class that was removed prior to Tailwind 1.0.
• Vue.js - adds classes for showing and hiding elements in different display variations in combination with Vue's v-cloak directive.
• Pseudo - Additional customizable variants for pseudo selectors.
• Custom Native - Custom utilities with little configuration
• Font Variant Numeric - Utility classes for font-variant-numeric
• Colorize - Colorize arbitrary elements using CSS filters
• Hyphens – Utility classes for hyphens
• Dark Mode - A plugin that adds variants for dark mode.
• Truncate Multiline - Tailwind CSS plugin to generate truncate multiline utilities.
• Theming Uses CSS variables to allow the usage of client-side multiple themes.
• RFS Utility classes for RFS to automate your responsive workflow
• 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
• Using Tailwind With GatsbyJS
• How to setup TailwindCSS in Phoenix 1.4
• jQuery + Tailwind Checkbox Toggle
• Rebuilding Acquia’s hosting dashboard with Vue.js and Tailwind CSS
• Rebuilding Bartik (Drupal’s default theme) with Vue.js and Tailwind CSS
• Tailwind Dark Mode Theme Switcher
• 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.