awesome-tailwindcss/readme.md

# Awesome Tailwind CSS [![Awesome](https://awesome.re/badge.svg)](https://awesome.re)

> 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](#resources)
- [Projects Using Tailwind CSS](#projects-using-tailwind-css)
  - [Open Source](#open-source)
  - [Apps/Websites](#appswebsites)
- [Tools](#tools)
- [Components & Libraries](#components--libraries)
- [Plugins](#plugins)
- [Demos & Samples](#demos--samples)


## Resources

- [Tailwind Official Site](https://tailwindcss.com)
- [Tailwind Official Repo](https://github.com/tailwindcss/tailwindcss)
- [Discussion Repo](https://github.com/tailwindcss/discuss)
- [Webpack Starter Project](https://github.com/tailwindcss/webpack-starter)
- [Gusts - Tailwind CSS Playground](https://gustscss.com/)
- [Laravel Frontend Preset](https://github.com/laravel-frontend-presets/tailwindcss)
- [Ruby on Rails Example Project](https://github.com/jvanbaarsen/tailwindcss-rails-example)
- [Tailwind Components](https://tailwindcomponents.com)
- [Tailwind Themes](https://www.tailwind-themes.com)
- [Tailwind Cheat Sheet](http://nerdcave.com/tailwind-cheat-sheet)
- [Alfred Workflow - Search Tailwind Docs with Alfred](https://github.com/clnt/alfred-tailwindcss-docs)
- [ng-tailwindcss - The happy marriage of Tailwind CSS with Angular CLI](https://github.com/tehpsalmist/ng-tailwindcss)
- [Tailwind Toolbox - Starter Templates](https://www.tailwindtoolbox.com)
- [Tailwind Templates](https://www.tailwindtemplates.io/)
- [Laravel Dark Tailwind Preset](https://github.com/Naoray/dark-tailwind-preset)
- [Add Your Item](https://github.com/merchedhq/awesome-tailwindcss/pulls)


## Projects Using Tailwind CSS

### Open Source

- [Tailwind Jekyll Starter Kit](https://github.com/taylorbryant/tailwind-jekyll)
- [Tailwind Gulp Starket Kit](https://github.com/simonswiss/tailwind-starter)
- [Tailwind Fiddle](https://tailwind.unravel.eu)
- [Wordpress Tailwind CSS + Google PWA](https://github.com/ri7nz/Mesjid)
- [Create React Native App Tailwind](https://github.com/taylorbryant/crna-tailwind)
- [Gatsby Starter Tailwind](https://github.com/taylorbryant/gatsby-starter-tailwind)
- [Gatsby Tailwind CSS Emotion Starter](https://github.com/muhajirframe/gatsby-tailwind-emotion-starter)
- [Create React App Tailwind](https://github.com/kriswep/cra-tailwindcss)
- [Jaxli - Feature Request System](https://github.com/laraboost/jaxli)
- [Goodwork - Project Management & Collaboration Tool](https://github.com/iluminar/goodwork)
- [Seminyak Hugo Theme](https://github.com/comfusion/seminyak)
- [Stitches - Website Generator with Tailwind](https://github.com/amiechen/stitches-template-generator)
- [Dogpatch - WordPress starter + Webpack, Vue, Babel and Tailwind CSS](https://github.com/jack-pallot/dogpatch)
- [Adds Tailwind CSS to your Ember app or addon](https://github.com/embermap/ember-cli-tailwind)
- [Create React App + Tailwind CSS + EmotionJS](https://github.com/muhajirframe/react-tailwind-emotion-starter/)
- [Statusfy](https://github.com/bazzite/statusfy): Statusfy is a Status Page System, easy to use and completely Open Source.
- [Todolist - Laravel, Vue and Tailwind CSS](https://github.com/guillaumebriday/todolist-frontend-vuejs)
- [Add Your Item](https://github.com/merchedhq/awesome-tailwindcss/pulls)

### Apps/Websites

- [Merched.com](https://merched.com)
- [NiftyCo](https://anifty.co)
- [Josh Manders](https://joshmanders.com/)
- [Matt Stauffer](https://mattstauffer.com/)
- [Miguel Piedrafita](https://miguelpiedrafita.com/)
- [Webslides](https://slides.zone)
- [Lichter.io (Alexander Lichter)](https://lichter.io)
- [Rias](https://rias.be)
- [Freek Van der Herten](https://murze.be/)
- [Taylor Bryant](https://taylorbryant.blog)
- [Oliver Davies](https://www.oliverdavies.uk)
- [BaseCode](https://basecodefieldguide.com)
- [Joey Beninghove](https://joey.io)
- [Stefan Bauer](https://stefanbauer.me)
- [Jim Shannon](https://jimshannon.me)
- [Eyewitness.io](https://eyewitness.io)
- [Laravel Spark](https://spark.laravel.com)
- [Snaptier](https://snaptier.co)
- [Milan Chheda](https://milanchheda.com)
- [Matheus Lima](https://matheuslima.com.br)
- [CSS Cursors](https://css-cursors.netlify.com/)
- [Developmint](https://developmint.de/)
- [Rational Investment Management](https://rationalim.com)
- [Stephen Popoola](https://stephenpopoola.uk)
- [Laraboost](https://laraboost.com)
- [Vince Mitchell](http://vincemitchell.me/)
- [Marco Mark](https://www.marcomark.net)
- [Nehal Hasnayeen](https://hasnayeen.github.io)
- [Plowman Craven](https://www.plowmancraven.co.uk)
- [Erik Campobadal](https://erik.cat)
- [Our Name is Mud](https://www.ournameismud.co.uk)
- [BudgetDuo](https://budgetduo.com)
- [Quickwords](https://quickwords.co)
- [The MBR Site](https://www.thembrsite.com)
- [Natures Finest Pet Supplies Holding Page](https://www.naturesfinestpetsupplies.co.uk)
- [Peter Fox](https://www.peterfox.me)
- [Martin Williams](https://www.martinwilliamsart.co.uk)
- [Brahms Electric Hearses](https://www.electrichearse.co.uk)
- [Woburn Mosaic Holding Page](https://www.woburnmosaic.co.uk)
- [Crypto Contributors](https://crypto-contributors.netlify.com)
- [Sjabloon](https://www.getsjabloon.com)
- [Guillaume Briday](https://guillaumebriday.fr)
- [Add Your Item](https://github.com/merchedhq/awesome-tailwindcss/pulls)


## Tools
- [Color shades generator](https://javisperez.github.io/tailwindcolorshades/)
- [Color palette generator](https://adevade.github.io/color-scheme-generator/)
- [Zeplin Config & Class generator](https://extensions.zeplin.io/5ae2d20017c57fd249c9876f)
- [Tailwind CSS IntelliSense for VS Code](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
- [Tailwind CSS Styled Snippets for VS Code](https://marketplace.visualstudio.com/items?itemName=muhajirframe.tailwind-styled-snippets)
- [Add Your Item](https://github.com/merchedhq/awesome-tailwindcss/pulls)


## Components & Libraries

- [Convert Bootstrap CSS code to Tailwind CSS code](https://github.com/awssat/tailwindo)
- [Use Tailwind CSS with CSS-in-JS](https://medium.com/@AndrewDelPrete/using-tailwindcss-with-css-in-js-32ae6796f95c)
- [tails-ui](https://github.com/knipferrc/tails-ui)
- [Toggle switch](https://github.com/TowelSoftware/tailwindcss-toggle)
- [Gatsby Plugin Tailwind CSS](https://github.com/muhajirframe/gatsby-plugin-tailwindcss)
- [Pagination Template For Laravel](https://gist.github.com/mazedlx/86512703b1dbcb987b2815c31e5173a3)
- [Add Your Item](https://github.com/merchedhq/awesome-tailwindcss/pulls)


## Plugins

- [Aspect Ratio](https://github.com/webdna/tailwindcss-aspect-ratio)
- [Card](https://github.com/NathanHeffley/tailwindcss-card)
- [Fluid](https://github.com/bradlc/tailwindcss-fluid)
- [Flexbox Order](https://github.com/035media/tailwindcss-flexbox-order)
- [Spinner](https://github.com/aniftyco/tailwindcss-spinner)
- [Transitions - 1](https://github.com/glhd/tailwindcss-plugins)
- [Transitions - 2](https://github.com/webdna/tailwindcss-transition)
- [Transitions - 3](https://github.com/benface/tailwindcss-transitions)
- [Bootstrap Tables](https://github.com/drehimself/tailwindcss-tables)
- [Visually Hidden](https://github.com/webdna/tailwindcss-visuallyhidden)
- [Writing Mode](https://github.com/magicspon/tailwindcss-writing-mode)
- [Alpha](https://github.com/bradlc/tailwindcss-alpha)
- [Cursor Extended](https://github.com/hacknug/tailwindcss-cursor-extended)
- [Blend Mode](https://github.com/hacknug/tailwindcss-blend-mode)
- [Object Fit](https://github.com/hendrikeng/tailwindcss-object-fit)
- [Image Rendering](https://github.com/hacknug/tailwindcss-image-rendering)
- [Text Indent](https://github.com/hacknug/tailwindcss-text-indent)
- [Triangle After](https://github.com/chrisrowe/tailwindcss-triangle-after)
- [CSS Color Vars](https://github.com/n1kk/tailwind-color-vars)
- [Responsive Embed](https://github.com/drdogbot7/tailwindcss-responsive-embed)
- [Object Position](https://github.com/hacknug/tailwindcss-object-position)
- [Accessibility](https://github.com/jack-pallot/tailwindcss-accessibility)
- [Layout](https://github.com/benface/tailwindcss-layout)
- [Gradients - 1](https://github.com/benface/tailwindcss-gradients)
- [Gradients - 2](https://github.com/lorisleiva/tailwindcss-plugins/tree/master/gradients)
- [Border Gradient](https://github.com/hellocosmin/tailwindcss-border-gradients)
- [Typography](https://github.com/benface/tailwindcss-typography)
- [Transforms](https://github.com/benface/tailwindcss-transforms)
- [Filters](https://github.com/benface/tailwindcss-filters)
- [Important](https://github.com/chasegiunta/tailwindcss-important)
- [Scrims](https://github.com/brettgullan/tailwindcss-scrims)
- [Grid](https://github.com/chrisrowe/tailwindcss-grid)
- [TailwindCSS variables](https://github.com/omarkhatibco/tailwind-css-variables) - Transform Tailwind config file to CSS variables.
- [Spaced Items](https://github.com/n1kk/tailwindcss-spaced-items) - Add fixed margins to all container items except last one.
- [Heropatterns](https://github.com/AndreaMinato/tailwind-heropatterns) - Streamlined integration between tailwindcss and heropatterns
- [Caret Color](https://github.com/naoray/tailwind-caret-color) - Coloring carets with tailwindcss colors
- [Direction](https://github.com/RonMelkhior/tailwindcss-dir) - RTL & LTR direction variants for Tailwind.
- [Add Your Item](https://github.com/merchedhq/awesome-tailwindcss/pulls)

## Demos & Samples

- [Tailwind CSS - Building a Login Page](https://mustafaaloko.github.io/2017/tailwind-css-building-a-login-page/)
- [Rebuilding Laravel.io with Tailwind CSS](https://www.youtube.com/watch?v=ZrRRMBaz5Z0)
- [Rebuilding Coinbase with Tailwind CSS](https://www.youtube.com/watch?v=7gX_ApBeSpQ) - [Codepen](https://codepen.io/adamwathan/pen/RxWrZr).
- [Creating a modal dialog with Tailwind CSS](https://codeburst.io/creating-a-modal-dialog-with-tailwind-css-42722c9aea4f)
- [Rebuilding FreshBooks with Tailwind CSS](http://joey.io/rebuilding-freshbooks-with-tailwind-css/)
- [PingPing - We build a Login using Tailwind CSS](https://stefanbauer.me/building-pingping/we-build-a-login-using-tailwindcss/)
- [Setting Up Tailwind in a Laravel Project](https://nick-basile.com/blog/post/setting-up-tailwind-in-a-laravel-project)
- [How to Build a Vue.js Component With Tailwind in a Laravel Project](https://nick-basile.com/blog/post/how-to-build-a-vuejs-component-with-tailwind-in-a-laravel-project)
- [Build a Customizable Vue.js Modal with Tailwind CSS](https://nick-basile.com/blog/post/build-a-customizable-vuejs-modal-with-tailwind-css)
- [Building a Nav with Tailwind CSS](https://nick-basile.com/blog/post/building-a-nav-with-tailwind-css)
- [How to Style a Form With Tailwind CSS](https://css-tricks.com/style-form-tailwind-css/)
- [Building a Photo Gallery With CSS Grid and Tailwind CSS](https://nick-basile.com/blog/post/building-a-photo-gallery-with-css-grid-and-tailwind-css)
- [Create a Sticky Footer Using Tailwind CSS](https://jimshannon.me/blog/create-a-sticky-footer-using-tailwind-css)
- [Interactive Tailwind + Vue Responsive Navbar](https://codepen.io/joshmanders/pen/PQQBoR)
- [Collection of marketing site templates](https://github.com/colmtuite/tailwind-template)
- [Plugin Examples (Official)](https://github.com/tailwindcss/plugin-examples)
- [Rebuilding Twitter with Tailwind CSS](https://www.youtube.com/watch?v=Pg_5Ni1_bg4) - [CodePen](https://codepen.io/drehimself/full/vpeVMx).
- [Rebuilding YouTube with Tailwind CSS + plugins](https://www.youtube.com/watch?v=qxQKnqmNKv0)
- [How to Add Tailwind CSS to an Ember App](https://eaf4.com/how-to-add-tailwindcss-to-an-ember-app/)
- [Laracasts Weekly Stream: Tailwind](https://www.youtube.com/watch?v=HIPgzWS-Bxg)
- [Rebuilding Netlify with Tailwind CSS](https://www.youtube.com/watch?v=_JhTaENzfZQ&t=1263s)
- [Rebuilding Resolute](https://www.youtube.com/watch?v=banq3TfAPYk)
- [How to setup Tailwind CSS in Sage (WordPress starter theme)](https://roots.io/guides/how-to-setup-tailwind-css-in-sage/)
- [More experimentation with Tailwind CSS](https://www.youtube.com/watch?v=nBzfVK3QUzM)
- [Using Tailwind With GatsbyJS](https://dev.to/jakedohm_34/using-tailwind-with-gatsby-js-10fj)
- [Add Your Item](https://github.com/merchedhq/awesome-tailwindcss/pulls)


## Contribute

Contributions welcome! Read the [contribution guidelines](contributing.md) first.


## License

[![CC0](http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg)](http://creativecommons.org/publicdomain/zero/1.0)

To the extent possible under law, [NiftyCo](https://aniftyco.com/) has waived all copyright and related or neighboring rights to this work.