mirror of
https://github.com/aniftyco/awesome-tailwindcss.git
synced 2025-12-10 14:55:34 +00:00
166 lines
8.6 KiB
Markdown
166 lines
8.6 KiB
Markdown
# Awesome Tailwind CSS [](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)
|
|
|
|
|
|
## 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 Tailwindcss + 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)
|
|
- [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)
|
|
- [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)
|
|
- [Ben John Bagley](https://benbagley.co.uk)
|
|
- [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)
|
|
- [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 TailwindCSS 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)
|
|
- [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](https://github.com/glhd/tailwindcss-plugins)
|
|
- [Bootstrap Tables](https://github.com/drehimself/tailwindcss-tables)
|
|
- [Transition](https://github.com/webdna/tailwindcss-transition)
|
|
- [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)
|
|
- [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 TailwindCSS](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 TailwindCSS 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)
|
|
- [Add Your Item](https://github.com/merchedhq/awesome-tailwindcss/pulls)
|
|
|
|
|
|
## Contribute
|
|
|
|
Contributions welcome! Read the [contribution guidelines](contributing.md) first.
|
|
|
|
|
|
## License
|
|
|
|
[](http://creativecommons.org/publicdomain/zero/1.0)
|