mirror of
https://github.com/aniftyco/awesome-tailwindcss.git
synced 2025-12-09 22:35:35 +00:00
124 lines
5.9 KiB
Markdown
124 lines
5.9 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)
|
|
|
|
|
|
## 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)
|
|
- [Add Your Item](https://github.com/merchedhq/awesome-tailwindcss/pulls)
|
|
|
|
### Apps/Websites
|
|
|
|
- [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)
|
|
- [Laravel Horizon](https://horizon.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/)
|
|
- [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/)
|
|
- [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)
|
|
- [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)
|
|
- [Wordpress with Tailwindcss + Google PWA](https://alghaffar.suarabaru.com/)
|
|
- [Collection of marketing site templates](https://github.com/colmtuite/tailwind-template)
|
|
- [Plugin Examples (Official)](https://github.com/tailwindcss/plugin-examples)
|
|
- [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)
|