mirror of
https://github.com/aniftyco/awesome-tailwindcss.git
synced 2025-12-08 22:13:24 +00:00
Clean-up: fixes, organization, descriptions (#183)
* Removed GustCSS (dead link) * Fixed NiftyCo URL * Removed https://jimshannon.me/ (dead link) * Removed Faruno (dead link) * Removed sticky footer tutorial (dead link) * Updated resources category * Removed projects category, cleaned up subcategories * Added descriptions to apps/websites * Cleaned up tools, added IDE extensions category. * Updated plugins * Added asterisk * [WIP] Reorganization * Fixed asterisks, removed read-it mentions * Fixed links and indent * Fixed last lint errors * Reorganized categories, added emojis * Updated contributing guidelines * Fixed list lint errors * Fixed syntax and typos
This commit is contained in:
Haew
Josh Manders
112
contributing.md
112
contributing.md
@@ -1,56 +1,94 @@
|
||||
# Contributing Guide
|
||||
|
||||
Please be sure to follow the [Tailwind CSS Community Guidelines](https://github.com/tailwindcss/tailwindcss/blob/master/.github/CODE_OF_CONDUCT.md).
|
||||
Please be sure to follow the [Tailwind CSS Community Guidelines](https://github.com/tailwindcss/tailwindcss/blob/master/.github/CODE_OF_CONDUCT.md). After your pull request, this list must still be elligible for [awesome](https://github.com/sindresorhus/awesome).
|
||||
|
||||
1. Make sure you put things in the right category!
|
||||
1. Always add your items to the end of a list. To be fair, the order is first-come-first-serve.
|
||||
1. If you think something belongs in the wrong category, or think there needs to be a new category, feel free to edit things too.
|
||||
1. Always add the "Add your item" to the end of each list `- [Add Your Item](https://github.com/merchedhq/awesome-tailwindcss/pulls)`
|
||||
## General Guidelines
|
||||
|
||||
1. Respect the formats and categories described below.
|
||||
2. Make sure your item is **awesome**.
|
||||
- > Only has awesome items. Awesome lists are curations of the best, not everything.
|
||||
> *— [Awesome Guidelines](https://github.com/sindresorhus/awesome/blob/master/pull_request_template.md#requirements-for-your-awesome-list)*
|
||||
3. If the item is a [plugin](README.md/#plugins), an [UI Library/Component](README.md/#ui-libraries--components), an [open-source project](README.md/#open-source-projects), or an [app or website](README.md/#apps--websites), it must be added **to the bottom of the list**. The other [Resources](README.md/#resources) sub-categories may have specific rules described in their sections.
|
||||
4. Use [`awesome-lint`](https://github.com/sindresorhus/awesome-lint) before sending your pull request. You can ignore the following lint errors:
|
||||
- `License was not detected by GitHub` (`remark-lint:awesome/github`)
|
||||
- `The repository should have ... as a GitHub topic` (`remark-lint:awesome/github`)
|
||||
- `Link to ... is dead` (`remark-lint:no-dead-urls`) (until https://github.com/transitive-bullshit/check-links/issues/4 is resolved)
|
||||
5. Please list the items you have added in the description of the pull request (if applicable) for faster PR approbation.
|
||||
6. Be awesome. 👓
|
||||
|
||||
### Projects using Tailwind CSS
|
||||
## Formats, Naming Conventions and Descriptions
|
||||
|
||||
Make sure you put things in the right category. There are five main categories:
|
||||
- Resources
|
||||
- Projects Using Tailwind CSS
|
||||
- Open Source
|
||||
- Apps/Websites
|
||||
- Components & Libraries
|
||||
- Plugins
|
||||
- Demos & Samples
|
||||
- Every item MUST have the following format: `[Item Name](link) - Description.`.
|
||||
- Every name and description must be in english.
|
||||
- Every mention to Tailwind CSS must use the exact name `Tailwind CSS`, except for plugin/library/product names.
|
||||
- ✖ `TailwindCSS`
|
||||
- ✖ `tailwind CSS`
|
||||
- ✖ `Tailwind`
|
||||
- Descriptions must not start with "The", "A" or similar.
|
||||
- ✔ Component library made with Tailwind CSS.
|
||||
- ✖ A plugin that adds variants for dark mode.
|
||||
- ✖ A tool for upgrading Tailwind CSS.
|
||||
- Descriptions must start with an uppercase character and ends with a period.
|
||||
- Descriptions must be **short** and **explicit**.
|
||||
- ✔ Adds better default styles to form elements.
|
||||
- ✔ Adds configurable transition utilities, with or without CSS variables.
|
||||
- ✖ Adds classes for showing and hiding elements in different display variations in combination with Vue's v-cloak directive. - **Too long**
|
||||
- ✖ Adds utility classes - **Not explicit**
|
||||
- [Plugins](README.md/#plugins) descriptions must start with a verb.
|
||||
- ✔ Adds `object-position` utilities.
|
||||
- ✔ Extends `object-position` utilities.
|
||||
- ✖ A plugin that adds variants for dark mode.
|
||||
- ✖ Additional variants for touch based media queries.
|
||||
- Descriptions must describe the resource, not be a slogan. This rule applies to every resource sub-category except [Demos, Samples & Tutorials](README.md/#demos-samples--tutorials).
|
||||
- ✔ Visual Studio Code IntelliSense extension for Tailwind CSS.
|
||||
- ✔ React UI library using Tailwind CSS.
|
||||
- ✖ Brings Tailwind CSS into React.
|
||||
- [Demos, Samples & Tutorials](README.md/#demos-samples--tutorials) descriptions must be a short but explicit description of the content. It *should* start with a verb or by "How to" when applicable.
|
||||
- ✔ Rebuilding Acquia’s hosting dashboard with Vue.js and Tailwind CSS.
|
||||
- ✖ Acquia’s hosting dashboard rebuilt with Vue.js and Tailwind CSS.
|
||||
- ✔ How to setup Tailwind CSS in Phoenix 1.4.
|
||||
- ✖ Setting up Tailwind CSS in Phoenix 1.4
|
||||
|
||||
### Resources
|
||||
# Categories
|
||||
|
||||
Official and unofficial resources for getting started with and using the Tailwind CSS framework.
|
||||
## Plugins
|
||||
|
||||
### Projects Using Tailwind CSS
|
||||
#### Open source
|
||||
This category must only contain Tailwind CSS plugins that use the [official plugin architecture](https://tailwindcss.com/docs/plugins/) to extend the framework. When adding your plugin to the list, **to the bottom**, but **ABOVE the deprecated plugins**.
|
||||
|
||||
Open Source section gives the possibility for developers to contribute and be a part of an opensource project using their knowledge of Tailwind.
|
||||
You should put your project in this category if the following conditions are true:
|
||||
- The documentation (README) contains a description of the project, illustration of the project with a demo or screenshots and a CONTRIBUTING section.
|
||||
- The documentation is in English.
|
||||
- The project is active and maintained.
|
||||
- The project accepts contributions.
|
||||
## UI Libraries & Components
|
||||
|
||||
The link provided should be the link of the github repository, not the demo.
|
||||
If you consider your project finished, and it does not need any contributions, consider the apps/website category.
|
||||
This category should contain UI libraries made with and for Tailwind CSS, as well as standalone components that are optimized for distribution. Components examples that are not distributable with a package manager should be in [Demos, Samples & Tutorials](README.md/#demos-samples--tutorials). When adding your item to the list, please add it **to the bottom**.
|
||||
|
||||
#### Apps/Websites
|
||||
## Resources
|
||||
|
||||
Apps/Websites gives the opportunity to showcase the awesome things we can build with Tailwind.
|
||||
You should put your app/website in this category if the following conditions are true:
|
||||
- The website is available without errors or ssl certificate problems, and load in a reasonable amount of time.
|
||||
- The website is using Tailwind intensively.
|
||||
Resources are stuff that are made with, for, or are useful for Tailwind CSS. If Tailwind CSS is not the main focus of the resource, maybe it doesn't belong to this list.
|
||||
|
||||
### Components & Libraries
|
||||
### Useful Links
|
||||
|
||||
Components and libraries that extend the Tailwind CSS framework.
|
||||
This category contains resources that are official *or* widely known and used in the Tailwind CSS community. If you find something that we forgot to add here, or if you built something a while ago that has become quite popular in the community, feel free to add it. Otherwise, it most likely belongs in the other categories.
|
||||
|
||||
### Plugins
|
||||
### Tools
|
||||
|
||||
Tailwind CSS plugins that use the [official plugin architecture](https://tailwindcss.com/docs/plugins/) to extend the framework.
|
||||
Tools can be things that help with setting up or working with Tailwind CSS, or stuff that extend other services to bring Tailwind CSS in them. The category has tags in the form of emojis. If you find no emoji corresponding to your tool but you believe there should be one, feel free to *propose* to add one in your pull request. If there are multiple amojis that correspond to your item, you can stack them.
|
||||
|
||||
### Demos & Samples
|
||||
### Starters, Templates & Themes
|
||||
|
||||
Demos, examples and samples of Tailwind CSS in use.
|
||||
This category contains boilerplates projects, starters projects and tools made for using Tailwind CSS as well as themes made with or for Tailwind CSS. When adding an item to this list, try to logically group it next to similar items. You can also stack emojis if you think it is needed.
|
||||
|
||||
### IDE Extensions
|
||||
|
||||
If you made an extension that makes the usage of Tailwind CSS easier, make sure it is properly distributable before adding it to the list. Please use the format `[<extension type/functionality> for <IDE name>](link) - <Full IDE name> <extension functionality> for Tailwind CSS` when applicable.
|
||||
|
||||
### Open-Source Projects
|
||||
|
||||
Open-source projects that use Tailwind CSS can be featured in this category if you feel that it is awesome enough. Please don't add newly-created projects though, and wait for them to get sort of popular before sending your pull request. The item must be added at the end of the list.
|
||||
|
||||
### Learning
|
||||
|
||||
Anything that is a material that can be used to better understand Tailwind CSS can be added here. Awesome blog posts, code samples, tutorials on any platform are welcome. When adding an item, please try to logically group them below other similar items, or by emoji.
|
||||
|
||||
### Apps & Websites
|
||||
|
||||
Any application, blog, or website that was built with Tailwind CSS and that is awesome enough can be added here. It must be something that features what can be done with the framework. You can promote your own stuff here, but it should be awesome enough, as it can't be a list of all Tailwind CSS websites ever.
|
||||
|
||||
Descriptions here do not need to be explicit or describing the content of the website. The name of the link should be the name of the blogger, the name of the application or the title of the website. Its description can be either `<name>'s website` or **briefly** describe the owner of the site.
|
||||
|
||||
516
readme.md
516
readme.md
@@ -7,270 +7,286 @@ Tailwind CSS is a utility-first CSS framework for rapidly building custom user i
|
||||
|
||||
## 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)
|
||||
- [Tailwind UI](https://tailwindui.com)
|
||||
- [Discussion Repo](https://github.com/tailwindcss/discuss)
|
||||
- [Webpack Starter Project](https://github.com/tailwindcss/webpack-starter)
|
||||
- [Gusts](https://gustscss.com/): Tailwind CSS Playground
|
||||
- [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 Cheat Sheet](http://nerdcave.com/tailwind-cheat-sheet)
|
||||
- [Alfred Workflow](https://github.com/clnt/alfred-tailwindcss-docs): Search Tailwind Docs with Alfred
|
||||
- [ng-tailwindcss](https://github.com/tehpsalmist/ng-tailwindcss): The happy marriage of Tailwind CSS with Angular CLI
|
||||
- [Tailwind Toolbox](https://www.tailwindtoolbox.com): Starter Templates
|
||||
- [Tailwind Templates](https://www.tailwindtemplates.io/)
|
||||
- [Laravel Dark Tailwind Preset](https://github.com/Naoray/dark-tailwind-preset)
|
||||
- [Testing Tailwind CSS plugins with Jest](https://www.oliverdavies.uk/articles/testing-tailwindcss-plugins-with-jest)
|
||||
- [vue-cli-plugin-tailwind](https://github.com/forsartis/vue-cli-plugin-tailwind): Tailwind for Vue CLI Projects
|
||||
- [Tailwind Figma Kit](https://github.com/impulse/tailwindcss-figma-kit)
|
||||
- [Tailwindcss Cheatsheet](https://umeshmk.github.io/Tailwindcss-cheatsheet)
|
||||
- [Tailwind setup with Webpack4 and PostCSS](https://paramagicdev.github.io/my-blog/javascript/tailwindWebpackPostCSS/)
|
||||
- [tailwind.run](https://tailwind.run/): Tailwind CSS Fiddle with built-time features
|
||||
- [Add Your Item](https://github.com/merchedhq/awesome-tailwindcss/pulls)
|
||||
|
||||
|
||||
## Projects Using Tailwind CSS
|
||||
|
||||
### Open Source
|
||||
|
||||
- [Jekyll Tailwind Starter](https://github.com/mhanberg/jekyll-tailwind-starter)
|
||||
- [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](https://github.com/laraboost/jaxli): Feature Request System
|
||||
- [Goodwork](https://github.com/iluminar/goodwork): Project Management & Collaboration Tool
|
||||
- [Seminyak Hugo Theme](https://git.habd.as/jhabdas/seminyak)
|
||||
- [Stitches](https://github.com/amiechen/stitches-template-generator): Website Generator with Tailwind
|
||||
- [Dogpatch](https://github.com/jack-pallot/dogpatch): WordPress starter + Webpack, Vue, Babel and Tailwind CSS
|
||||
- [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](https://github.com/guillaumebriday/todolist-frontend-vuejs): Laravel, Vue and Tailwind CSS
|
||||
- [Create React App, included with TailwindCSS and PurgeCSS](https://github.com/DemianD/create-react-app-tailwindcss)
|
||||
- [Admin Panel Built On Tailwind](https://github.com/tailwindadmin/admin)
|
||||
- [react-native-tailwindcss](https://github.com/TVke/react-native-tailwindcss)
|
||||
- [Hugo Starter Theme with Tailwindcss](https://github.com/dirkolbrich/hugo-theme-tailwindcss-starter)
|
||||
- [Tailwind Next.js Starter](https://github.com/oddstronaut/tailwind-next)
|
||||
- [Sapper & Svelte Tailwind Starter](https://github.com/EricPKerr/sapper-tailwindcss-starter)
|
||||
- [Netlify Lambda Tailwind Static Starter](https://github.com/HugoDF/netlify-lambda-tailwind-static-starter)
|
||||
- [Gatsby Starter Theme: Serif](https://github.com/windedge/gatsby-tailwind-serif)
|
||||
- [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/)
|
||||
- [Blogcast](https://blogcast.host)
|
||||
- [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)
|
||||
- [Sitesauce](https://sitesauce.app)
|
||||
- [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)
|
||||
- [Peter Fox](https://www.peterfox.me)
|
||||
- [Martin Williams](https://www.martinwilliamsart.co.uk)
|
||||
- [Brahms Electric Hearses](https://www.electrichearse.co.uk)
|
||||
- [Crypto Contributors](https://crypto-contributors.netlify.com)
|
||||
- [Sjabloon](https://www.getsjabloon.com)
|
||||
- [Guillaume Briday](https://guillaumebriday.fr)
|
||||
- [Hello Sun](https://hellosun.brussels/en/)
|
||||
- [Onur Şuyalçınkaya](https://suyalcinkaya.me)
|
||||
- [Faruno](https://www.faruno.co): A unique email address for every service you use within one inbox
|
||||
- [University of West London](https://www.uwl.ac.uk)
|
||||
- [OpenEmu](http://openemu.org)
|
||||
- [Alice's Magical Maze](https://alice.thomasverhelst.be/game)
|
||||
- [sleeplessmind.info](https://sleeplessmind.info/)
|
||||
- [The Speedcube Site](https://speedcube.site/)
|
||||
- [Woburn Mosaic](https://www.woburnmosaic.co.uk)
|
||||
- [Hunsbury Hot Tubs](https://www.hunsburyhottubs.co.uk/)
|
||||
- [DigitalDam](https://digitaldam.ca/): Automated backup/snapshot scheduling for DigitalOcean droplets.
|
||||
- [SlidesGo](https://slidesgo.com/): Free Google Slides and Powerpoint templates
|
||||
to boost your presentations.
|
||||
- [BuildPulse](https://buildpulse.io/): A GitHub app helping you win the fight against flaky builds.
|
||||
- [ScrumGenius](https://scrumgenius.com/): Automate daily standups on Slack and Microsoft Teams
|
||||
- [AwesomeTechStack](https://awesometechstack.com): Website Tech Stack Analyzer
|
||||
- [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)
|
||||
- [Tailwind CSS IntelliSense for (neo)vim](https://github.com/iamcco/coc-tailwindcss)
|
||||
- [Tailwind Button Playground](https://minthemiddle.github.io/tailwind-button-playground/)
|
||||
- [Tailupgrade](https://www.npmjs.com/package/tailupgrade) : Convert HTML files with tailwind V.0.x class name into stable version V.1.x
|
||||
- [Tailwind Colors](https://tailwind-colors.meidev.co): Generate color configuration for Tailwind v1.x.
|
||||
- [Tailwind CSS Figma Plugin](https://github.com/impulse/tailwindcss-figma-plugin): Tailwind CSS integration for Figma
|
||||
- [Tailwind Automatic Prefix Applicator](https://github.vue.tailwind-prefix.cbass.dev): Adds a prefix to tailwind vanilla classes
|
||||
- [typed-tailwind](https://github.com/dvkndn/typed-tailwind): Bring TailwindCSS to TypeScript
|
||||
- [re-tailwind](https://github.com/phthhieu/re-tailwind): Bring TailwindCSS to ReasonML
|
||||
- [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)
|
||||
- [Shift to the next Tailwind CSS version hassle-free](https://github.com/awssat/tailwind-shift)
|
||||
- [VueTailwind](https://github.com/alfonsobries/vue-tailwind): A set of vue components with configurable classes
|
||||
- [Add Your Item](https://github.com/merchedhq/awesome-tailwindcss/pulls)
|
||||
- [UI Libraries & Components](#ui-libraries--components)
|
||||
- [Resources](#resources)
|
||||
- [Useful Links](#useful-links)
|
||||
- [Tools](#tools)
|
||||
- [Starters, Templates & Themes](#starters-templates--themes)
|
||||
- [IDE Extensions](#ide-extensions)
|
||||
- [Open-Source Projects](#open-source-projects)
|
||||
- [Learning](#learning)
|
||||
- [Apps & Websites](#apps--websites)
|
||||
|
||||
|
||||
## Plugins
|
||||
|
||||
- [Custom Forms (Official)](https://github.com/tailwindcss/custom-forms) - A better base for styling form elements with Tailwind CSS.
|
||||
- [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 Gradients](https://github.com/cossssmin/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.
|
||||
- [Touch](https://github.com/SteadfastCollective/tailwindcss-touch) - Additional variants for touch based media queries.
|
||||
- [Elevation](https://github.com/jonaskay/tailwindcss-elevation) - Elevation classes taken from Material Components.
|
||||
- [Localized](https://github.com/hdodov/tailwindcss-localized) - Variant for utilities based on site language.
|
||||
- [Skip link](https://github.com/opdavies/tailwindcss-skip-link) - Adds an accessible 'skip to main content' link
|
||||
- [List Reset](https://github.com/opdavies/tailwindcss-list-reset) - Re-adds the `list-reset` class that was removed prior to Tailwind 1.0.
|
||||
- [Vue.js](https://github.com/opdavies/tailwindcss-vuejs) - adds classes for showing and hiding elements in different display variations in combination with Vue's v-cloak directive.
|
||||
- [Pseudo](https://github.com/Log1x/tailwindcss-pseudo) - Additional customizable variants for pseudo selectors.
|
||||
- [Custom Native](https://github.com/SirNavith/tailwindcss-custom-native) - Custom utilities with little configuration
|
||||
- [Font Variant Numeric](https://github.com/philippbosch/tailwindcss-font-variant-numeric) - Utility classes for `font-variant-numeric`
|
||||
- [Colorize](https://github.com/philippbosch/tailwindcss-colorize) - Colorize arbitrary elements using CSS filters
|
||||
- [Hyphens](https://github.com/philippbosch/tailwindcss-hyphens) – Utility classes for `hyphens`
|
||||
- [Dark Mode](https://github.com/ChanceArthur/tailwindcss-dark-mode) - A plugin that adds variants for dark mode.
|
||||
- [Truncate Multiline](https://github.com/jhta/tailwindcss-truncate-multiline) - Tailwind CSS plugin to generate truncate multiline utilities.
|
||||
- [Theming](https://github.com/hawezo/tailwindcss-theming) Uses CSS variables to allow the usage of client-side multiple themes.
|
||||
- [RFS](https://github.com/aerni/tailwindcss-rfs) Utility classes for RFS to automate your responsive workflow
|
||||
- [Add Your Item](https://github.com/merchedhq/awesome-tailwindcss/pulls)
|
||||
- [Custom Forms (Official)](https://github.com/tailwindcss/custom-forms) - Adds better default styles to form elements.
|
||||
- [benface's transitions](https://github.com/benface/tailwindcss-transitions) - Adds configurable transition utilities, with or without CSS variables.
|
||||
- [Theming (Dark/Light)](https://github.com/hawezo/tailwindcss-theming) - Adds powerful theming capabilities with CSS variables and `prefers-color-scheme`.
|
||||
- [Text Indent](https://github.com/hacknug/tailwindcss-text-indent) - Adds `text-indent` utilities.
|
||||
- [Transforms](https://github.com/benface/tailwindcss-transforms) - Adds `transform` utilities.
|
||||
- [Image Rendering](https://github.com/hacknug/tailwindcss-image-rendering) - Adds `image-rendering` utilities.
|
||||
- [Cursor Extended](https://github.com/hacknug/tailwindcss-cursor-extended) - Extends `cursor` utilities.
|
||||
- [Grid](https://github.com/chrisrowe/tailwindcss-grid) - Adds CSS grids utilities.
|
||||
- [Filters](https://github.com/benface/tailwindcss-filters) - Adds `filter` utilities.
|
||||
- [Spinner](https://github.com/aniftyco/tailwindcss-spinner) - Adds a spinner utility.
|
||||
- [Elevation](https://github.com/jonaskay/tailwindcss-elevation) - Adds [Material UI `elevation`](https://material.io/design/environment/elevation.html) utilities.
|
||||
- [Caret Color](https://github.com/naoray/tailwind-caret-color) - Adds `caret` color utilities.
|
||||
- [Direction](https://github.com/RonMelkhior/tailwindcss-dir) - Adds `RTL` and `LTR` variants.
|
||||
- [Touch](https://github.com/SteadfastCollective/tailwindcss-touch) - Adds `touch` variants.
|
||||
- [Blend Mode](https://github.com/hacknug/tailwindcss-blend-mode) - Adds `blend-mode` utilities.
|
||||
- [Colorize](https://github.com/philippbosch/tailwindcss-colorize) - Adds `filter` utilities.
|
||||
- [Writing Mode](https://github.com/magicspon/tailwindcss-writing-mode) - Adds `writing-mode` utilities.
|
||||
- [Responsive Embed](https://github.com/drdogbot7/tailwindcss-responsive-embed) - Adds a `responsive-embed` component.
|
||||
- [Aspect Ratio](https://github.com/webdna/tailwindcss-aspect-ratio) - Adds `aspect-ratio` utilities.
|
||||
- [Hyphens](https://github.com/philippbosch/tailwindcss-hyphens) - Adds `hyphens` utilities.
|
||||
- [Border Gradients](https://github.com/cossssmin/tailwindcss-border-gradients) - Adds `border-image` gradient utilities.
|
||||
- [RFS](https://github.com/aerni/tailwindcss-rfs) - Adds [`RFS`](https://github.com/twbs/rfs) utilities.
|
||||
- [Font Variant Numeric](https://github.com/philippbosch/tailwindcss-font-variant-numeric) - Adds `font-variant-numeric` utilities.
|
||||
- [Dark Mode](https://github.com/ChanceArthur/tailwindcss-dark-mode) - Adds `dark` variants based on the `prefers-color-scheme` media query.
|
||||
- [Vue.js](https://github.com/opdavies/tailwindcss-vuejs) - Adds visibility classes that work with Vue.js's `v-cloak` directive.
|
||||
- [List Reset](https://github.com/opdavies/tailwindcss-list-reset) - Re-adds the `list-reset` class that was removed prior to Tailwind CSS 1.0.
|
||||
- [Fluid](https://github.com/bradlc/tailwindcss-fluid) - Adds fluid sizing utilities.
|
||||
- [Flexbox Order](https://github.com/035media/tailwindcss-flexbox-order) - Extends `order` utilities.
|
||||
- [benface's gradients](https://github.com/benface/tailwindcss-gradients) - Adds gradient utilities.
|
||||
- [lorisleiva's gradients](https://github.com/lorisleiva/tailwindcss-plugins/tree/master/gradients) - Adds background gradient utilities.
|
||||
- [Alpha](https://github.com/bradlc/tailwindcss-alpha) - Adds alpha color variants.
|
||||
- [Bootstrap Tables](https://github.com/drehimself/tailwindcss-tables) - Adds table utilities based on Bootstrap's tables.
|
||||
- [Typography](https://github.com/benface/tailwindcss-typography) - Adds typography utilities.
|
||||
- [Card](https://github.com/NathanHeffley/tailwindcss-card) - Adds card components.
|
||||
- [webdna's transitions](https://github.com/webdna/tailwindcss-transition) - Adds configurable transition utilities.
|
||||
- [glhd's transitions](https://github.com/glhd/tailwindcss-plugins) - Adds basic transition utilities.
|
||||
- [Triangle After](https://github.com/chrisrowe/tailwindcss-triangle-after) - Adds CSS triangles utilities.
|
||||
- [Scrims](https://github.com/brettgullan/tailwindcss-scrims) - Adds scrims utilities.
|
||||
- [Colors to CSS Variables](https://github.com/n1kk/tailwind-color-vars) - Exports color configuration to CSS Custom Properties.
|
||||
- [CSS Variables](https://github.com/omarkhatibco/tailwind-css-variables) - Exports configuration to CSS Custom Properties.
|
||||
- [Spaced Items](https://github.com/n1kk/tailwindcss-spaced-items) - Adds `spaced` components that add fixed margins to all container items, except the last one.
|
||||
- [Heropatterns](https://github.com/AndreaMinato/tailwind-heropatterns) - Ads [Hero Patterns](https://www.heropatterns.com) components.
|
||||
- [Localized](https://github.com/hdodov/tailwindcss-localized) - Adds variants based on the HTML `lang` attribute, to use utilities only with certain languages.
|
||||
- [Skip link](https://github.com/opdavies/tailwindcss-skip-link) - Adds a *Skip to main content* accessible component.
|
||||
- [Pseudo](https://github.com/Log1x/tailwindcss-pseudo) - Adds custom variants to Tailwind CSS's configuration.
|
||||
- [Custom Native](https://github.com/SirNavith/tailwindcss-custom-native) - Leverages Tailwind CSS's configuration to allow the creation of utilities.
|
||||
- [Truncate Multiline](https://github.com/jhta/tailwindcss-truncate-multiline) - Adds utilities to truncate multi-line text elements.
|
||||
|
||||
## Demos & Samples
|
||||
> 🛑 - *The functionalities these plugins below offer have been fully or partially implemented in the latest Tailwind CSS versions.*
|
||||
|
||||
- [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)
|
||||
- [How to setup TailwindCSS in Phoenix 1.4](https://equimper.com/blog/how-to-setup-tailwindcss-in-phoenix-1.4)
|
||||
- [jQuery + Tailwind Checkbox Toggle](https://craigerskine.github.io/jquery-tailwind-checkbox-toggle/)
|
||||
- [Rebuilding Acquia’s hosting dashboard with Vue.js and Tailwind CSS](https://github.com/opdavies/rebuilding-acquia)
|
||||
- [Rebuilding Bartik (Drupal’s default theme) with Vue.js and Tailwind CSS](https://www.oliverdavies.uk/articles/rebuilding-bartik-with-vuejs-tailwind-css)
|
||||
- [Tailwind Dark Mode Theme Switcher](https://github.com/huphtur/tailwind-theme-switcher)
|
||||
- [Re-create Airbnb’s Home Page with Tailwind CSS](https://web-crunch.com/re-create-airbnbs-home-page-with-tailwind-css/)
|
||||
- [Let’s Build: With Tailwind CSS – Movie Production Landing Page](https://web-crunch.com/tailwind-css-movie-production-landing-page/)
|
||||
- [Lets Build: With Tailwind CSS – Responsive Navbar](https://web-crunch.com/lets-build-tailwind-css-responsive-navbar/)
|
||||
- [Let’s Build: with Tailwind CSS Dribbble Shot](https://web-crunch.com/lets-build-tailwind-css-dribbble-shot/)
|
||||
- [Let’s Build: With Tailwind CSS – Tweet](https://web-crunch.com/lets-build-tailwind-css-tweet/)
|
||||
- [How to Extend Tailwind CSS](https://web-crunch.com/how-to-extend-tailwind-css/)
|
||||
- [Add Your Item](https://github.com/merchedhq/awesome-tailwindcss/pulls)
|
||||
- 🛑 [Visually Hidden](https://github.com/webdna/tailwindcss-visuallyhidden) - Adds screen reader utilities.
|
||||
- 🛑 [Object Fit](https://github.com/hendrikeng/tailwindcss-object-fit) - Adds `object-fit` utilities.
|
||||
- 🛑 [Object Position](https://github.com/hacknug/tailwindcss-object-position) - Adds `object-position` utilities.
|
||||
- 🛑 [Accessibility](https://github.com/jack-pallot/tailwindcss-accessibility) - Adds screen reader utilities.
|
||||
- 🛑 [Layout](https://github.com/benface/tailwindcss-layout) - Adds some layout utilities.
|
||||
- 🛑 [Important](https://github.com/chasegiunta/tailwindcss-important) - Adds an `important` variant.
|
||||
|
||||
|
||||
## UI Libraries & Components
|
||||
|
||||
- [tails-ui](https://github.com/knipferrc/tails-ui) - React UI library using Tailwind CSS.
|
||||
- [VueTailwind](https://github.com/alfonsobries/vue-tailwind) - Vue.js UI library using Tailwind CSS.
|
||||
- [Tailwind Toolbox](https://www.tailwindtoolbox.com) - Tailwind CSS templates, components and resources.
|
||||
- [Tailwind Templates](https://www.tailwindtemplates.io) - Tailwind CSS components.
|
||||
- [jQuery + Tailwind Checkbox Toggle](https://craigerskine.github.io/jquery-tailwind-checkbox-toggle) - Switches using jQuery and Tailwind CSS.
|
||||
|
||||
## Resources
|
||||
|
||||
### Useful Links
|
||||
|
||||
- [Tailwind CSS website](https://tailwindcss.com) - Official Tailwind CSS website.
|
||||
- [Tailwind CSS on GitHub](https://github.com/tailwindcss/tailwindcss) - Official Tailwind CSS repository.
|
||||
- [Tailwind UI](https://tailwindui.com) - Component library made with Tailwind CSS.
|
||||
- [Discussion Repository](https://github.com/tailwindcss/discuss) - Official Tailwind CSS repository for discussions.
|
||||
- [Tailwind Components](https://tailwindcomponents.com) - Community-driven Tailwind CSS component repository.
|
||||
- [Built With Tailwind](https://builtwithtailwind.com/) - Community-driven collection of awesome websites built with Tailwind CSS.
|
||||
- [Tailwind Cheat Sheet](https://umeshmk.github.io/Tailwindcss-cheatsheet) - Tailwind CSS class names, variants and directives cheat sheet.
|
||||
- [Tailwind Cheat Sheet](http://nerdcave.com/tailwind-cheat-sheet) - Tailwind CSS class names cheat sheet.
|
||||
- [tailwind.run](https://tailwind.run) - Tailwind CSS fiddle with built-time features (online).
|
||||
|
||||
### Tools
|
||||
|
||||
- 🌍🔧 [Color shades generator](https://javisperez.github.io/tailwindcolorshades) - Color shades generator for Tailwind CSS (online).
|
||||
- 🌍🔧 [Color palette generator](https://adevade.github.io/color-scheme-generator) - Color palette generator that outputs a color configuration for Tailwind CSS (online).
|
||||
- 🌍 [Tailwind Button Playground](https://minthemiddle.github.io/tailwind-button-playground) - Playground for theming a button with Tailwind CSS (online).
|
||||
- 🌍🔧 [Stitches](https://stitches.hyperyolo.com/) - Template generator with Tailwind (online).
|
||||
- 🌍🔧 [Tailwind Colors](https://tailwind-colors.meidev.co) - Color configuration generator for Tailwind CSS.
|
||||
- 🌍🧪 [Tailwind Automatic Prefix Applicator](https://github.vue.tailwind-prefix.cbass.dev) - Tailwind classes' prefixer tool.
|
||||
- 🧪 [Tailwindo](https://github.com/awssat/tailwindo) - Bootstrap to Tailwind CSS converter.
|
||||
- 🧪 [Tailupgrade](https://github.com/virkillz/tailupgrade) - Conversion tool for upgrading HTML files from Tailwind CSS v0.x to v1.0.
|
||||
- 🧪 [Tailwind Shift](https://github.com/awssat/tailwind-shift) - Upgrade tool for upgrading from Tailwind CSS v0.7 to v1.0.
|
||||
- 🌍 [tailwind.run](https://tailwind.run) - Tailwind CSS fiddle with built-time features (online).
|
||||
- 🅰 [typed-tailwind](https://github.com/dvkndn/typed-tailwind) - TypeScript typings for Tailwind CSS.
|
||||
- 💼🔧 [Zeplin Config & Class generator](https://extensions.zeplin.io/5ae2d20017c57fd249c9876f) - Zeplin extension that generates Tailwind configurations.
|
||||
- 💼 [Gatsby Plugin Tailwind CSS](https://github.com/muhajirframe/gatsby-plugin-tailwindcss) - Gastby plugin to use Tailwind CSS with CSS-in-JS.
|
||||
- 🔧 [re-tailwind](https://github.com/phthhieu/re-tailwind) - ReasonML utility that generates Tailwind classes.
|
||||
- 🅰 [react-native-tailwindcss](https://github.com/TVke/react-native-tailwindcss) - React Native typing system.
|
||||
- 💼 [Alfred Workflow](https://github.com/clnt/alfred-tailwindcss-docs) - Fast Tailwind CSS documentation search application.
|
||||
- 💼 [ng-tailwindcss](https://github.com/tehpsalmist/ng-tailwindcss) - CLI tool for integrating Tailwind CSS into Angular-CLI projects.
|
||||
- 💼 [vue-cli-plugin-tailwind](https://github.com/forsartis/vue-cli-plugin-tailwind) - Vue CLI plugin that adds Tailwind CSS to a project.
|
||||
- 💼 [Tailwind CSS Figma Kit](https://github.com/impulse/tailwindcss-figma-kit) - Figma Kit for Tailwind CSS.
|
||||
- 💼 [Tailwind CSS Figma Plugin](https://github.com/impulse/tailwindcss-figma-plugin) - Figma plugin that integrates Tailwind CSS.
|
||||
|
||||
| Emoji | Description |
|
||||
| ----- | ---------------------------------------------- |
|
||||
| 🌍 | Online accessible |
|
||||
| 🧪 | Conversion or upgrade tool |
|
||||
| 🔧 | Generator |
|
||||
| 🅰 | Typing/enforcement |
|
||||
| 💼 | Plugins/Tools/Extensions for external services |
|
||||
|
||||
### Starters, Templates & Themes
|
||||
|
||||
- 🔧 [Jekyll Starter](https://github.com/mhanberg/jekyll-tailwind-starter) - Jekyll starter using Tailwind CSS.
|
||||
- 🔧 [Jekyll Starter](https://github.com/taylorbryant/tailwind-jekyll) - Jekyll starter using Tailwind CSS.
|
||||
- 🔧 [Gulp Starter](https://github.com/simonswiss/tailwind-starter) - Gulp starter using Tailwind CSS.
|
||||
- 🔧 [Gatsby Starter](https://github.com/taylorbryant/gatsby-starter-tailwind) - Gatsby starter using Tailwind CSS.
|
||||
- 🔧 [Gatsby Starter + Emotion JS](https://github.com/muhajirframe/gatsby-tailwind-emotion-starter) - Gatsby starter using Tailwind CSS and Emotion JS.
|
||||
- 🔧 [Create React App Boilerplate with EmotionJS](https://github.com/muhajirframe/react-tailwind-emotion-starter) - CRA boilerplate using Tailwind CSS and Emotion JS.
|
||||
- 🔧 [Create React App Boilerplate](https://github.com/kriswep/cra-tailwindcss) - CRA boilerplate using Tailwind CSS.
|
||||
- 🔧🛠 [Create React App script with PurgeCSS](https://github.com/DemianD/create-react-app-tailwindcss) - CRA script that adds Tailwind CSS and PurgeCSS.
|
||||
- 🔧 [Dogpatch](https://github.com/jack-pallot/dogpatch) - WordPress starter using Webpack, Vue, Babel and Tailwind CSS.
|
||||
- 🔧 [Next.js Starter](https://github.com/oddstronaut/tailwind-next) - Next.js boilerplate using Tailwind CSS.
|
||||
- 🔧 [Sapper & Svelte Starter](https://github.com/EricPKerr/sapper-tailwindcss-starter) - Svelte boilerplate using Sapper, Tailwind CSS, Purge CSS, Prettier and ESLint.
|
||||
- 🔧 [Netlify Lambda Static Starter](https://github.com/HugoDF/netlify-lambda-tailwind-static-starter) - Netlify Lambda boilerplate using Tailwind CSS.
|
||||
- 🔧 [Ruby on Rails Example Project](https://github.com/jvanbaarsen/tailwindcss-rails-example) - Rails example application using Tailwind CSS.
|
||||
- 🔧🛠 [Laravel Frontend Preset](https://github.com/laravel-frontend-presets/tailwindcss) - Front-end preset using Tailwind CSS for the Laravel Framework.
|
||||
- 🔧🛠 [Laravel Dark Frontend Preset](https://github.com/Naoray/dark-tailwind-preset) - Dark-themed front-end preset using Tailwind CSS for the Laravel Framework.
|
||||
- 🔧 [Laravel Boilerplate](https://github.com/hawezo/laravel-boilerplate) - Laravel boilerplate using Tailwind CSS, Inertia JS, TypeScript, Vue, and font-end theming.
|
||||
- 🔧 [Hugo Starter Theme Starter](https://github.com/dirkolbrich/hugo-theme-tailwindcss-starter) - Hugo theme starter using Tailwind CSS.
|
||||
- 🎨 [Gatsby Serif](https://github.com/windedge/gatsby-tailwind-serif) - Gatsby's serif theme using Tailwind CSS.
|
||||
- 🎨 [Tailwind Admin](https://github.com/tailwindadmin/admin) - Administration panel template with Tailwind CSS.
|
||||
- 🎨 [Wordpress Tailwind CSS + Google PWA](https://github.com/ri7nz/Mesjid) - Wordpress Theme and PWA using Tailwind CSS.
|
||||
- 🎨 [Seminyak Hugo Theme](https://git.habd.as/jhabdas/seminyak) - Hugo Theme using Tailwind CSS.
|
||||
|
||||
| Emoji | Description |
|
||||
| ----- | ---------------------------------------------- |
|
||||
| 🔧 | Starters & Boilerplates |
|
||||
| 🛠 | Starter packages |
|
||||
| 🎨 | Templates & Themes |
|
||||
|
||||
### IDE Extensions
|
||||
|
||||
- [Tailwind CSS IntelliSense for VS Code](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) - Visual Studio Code IntelliSense extension for Tailwind CSS.
|
||||
- [Tailwind CSS Styled Snippets for VS Code](https://marketplace.visualstudio.com/items?itemName=muhajirframe.tailwind-styled-snippets) - Visual Studio Code snippet extension for Tailwind CSS.
|
||||
- [Tailwind CSS IntelliSense for Neovim](https://github.com/iamcco/coc-tailwindcss) - Neovim IntelliSense extension for Tailwind CSS.
|
||||
|
||||
### Open-Source Projects
|
||||
|
||||
- [Goodwork](https://github.com/iluminar/goodwork) - Project Management & Collaboration tool.
|
||||
- [Statusfy](https://github.com/bazzite/statusfy) - Status page system using Tailwind CSS.
|
||||
- [Todolist](https://github.com/guillaumebriday/todolist-frontend-vuejs) - To-do list application using Tailwind CSS.
|
||||
|
||||
### Learning
|
||||
|
||||
- 🧪 [Tailwind Dark Mode Theme Switcher](https://github.com/huphtur/tailwind-theme-switcher) - Switching themes with CSS Custom Properties and Tailwind CSS.
|
||||
- 🧪 [Plugin Examples (Official)](https://github.com/tailwindcss/plugin-examples) - Official plugin examples.
|
||||
- 🧪 [Acquia](https://github.com/opdavies/rebuilding-acquia) - Acquia’s hosting dashboard rebuilt with Vue.js and Tailwind CSS.
|
||||
- 🧪 [Navbar](https://codepen.io/joshmanders/pen/PQQBoR) - Navbar made with Vue.js and Tailwind CSS.
|
||||
- 🧪 [Toggle switch](https://github.com/TowelSoftware/tailwindcss-toggle) - Switch using Tailwind CSS.
|
||||
- 🔧 [Testing Tailwind CSS plugins with Jest](https://www.oliverdavies.uk/articles/testing-tailwindcss-plugins-with-jest) - How to test Tailwind CSS plugins with Jest.
|
||||
- 🔧 [Tailwind CSS with Webpack 4 and PostCSS](https://paramagicdev.github.io/my-blog/javascript/tailwindWebpackPostCSS) - How to setup Tailwind CSS with PostCSS and Webpack.
|
||||
- 🔧 [Tailwind CSS with CSS-in-JS](https://medium.com/@AndrewDelPrete/using-tailwindcss-with-css-in-js-32ae6796f95c) - How to use Tailwind CSS with CSS-in-JS.
|
||||
- 🔧 [Tailwind CSS in a Laravel Project](https://nick-basile.com/blog/post/setting-up-tailwind-in-a-laravel-project) - How to setup Tailwind CSS in a Laravel project.
|
||||
- 🔧 [Tailwind CSS with Ember](https://eaf4.com/how-to-add-tailwindcss-to-an-ember-app) - How to add Tailwind CSS to an Ember application.
|
||||
- 🔧 [Sage WordPress theme and Tailwind CSS](https://roots.io/guides/how-to-setup-tailwind-css-in-sage) - How to setup Tailwind CSS in Sage.
|
||||
- 🔧 [Tailwind CSS with GatsbyJS](https://dev.to/jakedohm_34/using-tailwind-with-gatsby-js-10fj) - How to use Tailwind CSS with Gatsby.
|
||||
- 🔧 [Tailwind CSS with Phoenix 1.4](https://equimper.com/blog/how-to-setup-tailwindcss-in-phoenix-1.4) - How to setup Tailwind CSS in Phoenix 1.4.
|
||||
- 🔧 [Extend Tailwind CSS](https://web-crunch.com/how-to-extend-tailwind-css) - How to Extend Tailwind CSS.
|
||||
- 🎬 [Rebuilding Laravel.io](https://www.youtube.com/watch?v=ZrRRMBaz5Z0) - Rebuilding Laravel.io with Tailwind CSS.
|
||||
- 🎬 [Rebuilding Coinbase](https://www.youtube.com/watch?v=7gX_ApBeSpQ) - Rebuilding Coinbase with Tailwind CSS.
|
||||
- [Codepen](https://codepen.io/adamwathan/pen/RxWrZr)
|
||||
- 🎬 [Rebuilding Twitter](https://www.youtube.com/watch?v=Pg_5Ni1_bg4) - Rebuilding Twitter with Tailwind CSS.
|
||||
- [CodePen](https://codepen.io/drehimself/full/vpeVMx)
|
||||
- 🎬 [Rebuilding YouTube](https://www.youtube.com/watch?v=qxQKnqmNKv0) - Rebuilding YouTube with Tailwind CSS.
|
||||
- 🎬 [Rebuilding Netlify](https://www.youtube.com/watch?v=_JhTaENzfZQ&t=1263s) - Rebuilding Netlify with Tailwind CSS.
|
||||
- 🎬 [Rebuilding Resolute](https://www.youtube.com/watch?v=banq3TfAPYk) - Rebuilding Resolute with Tailwind CSS.
|
||||
- 🎬 [Let’s Build: Movie Production Landing Page](https://web-crunch.com/tailwind-css-movie-production-landing-page) - Building a movie production landing page with Tailwind CSS.
|
||||
- 🎬 [Lets Build: Responsive Navbar](https://web-crunch.com/lets-build-tailwind-css-responsive-navbar) - Building a responsive navbar with Tailwind CSS.
|
||||
- 🎬 [Let’s Build: Dribbble Shot](https://web-crunch.com/lets-build-tailwind-css-dribbble-shot) - Dribbble shot with Tailwind CSS.
|
||||
- 🎬 [Let’s Build: Tweet component](https://web-crunch.com/lets-build-tailwind-css-tweet) - Building a Tweet component with Tailwind CSS.
|
||||
- 🎓 [Modal Dialog](https://codeburst.io/creating-a-modal-dialog-with-tailwind-css-42722c9aea4f) - Creating a modal dialog with Tailwind CSS.
|
||||
- 🎓 [Rebuilding FreshBooks](http://joey.io/rebuilding-freshbooks-with-tailwind-css) - Rebuilding FreshBooks with Tailwind CSS.
|
||||
- 🎓 [Login Page (PingPing)](https://stefanbauer.me/building-pingping/we-build-a-login-using-tailwindcss) - Creating a login page with Tailwind CSS.
|
||||
- 🎓 [Login Page](https://mustafaaloko.github.io/2017/tailwind-css-building-a-login-page) - Creating a login page with Tailwind CSS.
|
||||
- 🎓 [Vue.js Component with Tailwind and Laravel](https://nick-basile.com/blog/post/how-to-build-a-vuejs-component-with-tailwind-in-a-laravel-project) - Building a Vue.js component with Tailwind CSS in a Laravel project.
|
||||
- 🎓 [Vue.js Modal](https://nick-basile.com/blog/post/build-a-customizable-vuejs-modal-with-tailwind-css) - Building a customizable modal with Tailwind CSS and Vue.js.
|
||||
- 🎓 [Navigation](https://nick-basile.com/blog/post/building-a-nav-with-tailwind-css) - Building a navigation with Tailwind CSS.
|
||||
- 🎓 [Forms with Tailwind CSS](https://css-tricks.com/style-form-tailwind-css) - How to style a form with Tailwind CSS.
|
||||
- 🎓 [Photo gallery with CSS grids](https://nick-basile.com/blog/post/building-a-photo-gallery-with-css-grid-and-tailwind-css) - Building a photo gallery with CSS grids and Tailwind CSS.
|
||||
- 🎓 [Rebuilding Bartik](https://www.oliverdavies.uk/articles/rebuilding-bartik-with-vuejs-tailwind-css) - Rebuilding Bartik (Drupal’s default theme) with Vue.js and Tailwind CSS.
|
||||
- 🎓 [Rebuilding Airbnb’s Home Page](https://web-crunch.com/re-create-airbnbs-home-page-with-tailwind-css) - Rebuilding Airbnb’s Home Page with Tailwind CSS.
|
||||
- 🎥 [Laracasts Weekly Stream: Tailwind](https://www.youtube.com/watch?v=HIPgzWS-Bxg)
|
||||
- 🎥 [More experimentation with Tailwind CSS](https://www.youtube.com/watch?v=nBzfVK3QUzM)
|
||||
|
||||
| Emoji | Type |
|
||||
| ----- | -------------------------- |
|
||||
| 🧪 | Sample |
|
||||
| 🔧 | Setup Tutorial |
|
||||
| 🎬 | Video Tutorial |
|
||||
| 🎓 | Component or Page Tutorial |
|
||||
| 🎥 | Cast |
|
||||
|
||||
### Apps & Websites
|
||||
|
||||
- [University of West London](https://www.uwl.ac.uk) - UWL's website.
|
||||
- [Merched.com](https://merched.com) - Design-selling platform.
|
||||
- [NiftyCo](https://aniftyco.com) - Website of NiftyCo.
|
||||
- [Josh Manders](https://joshmanders.com) - Josh Manders's website.
|
||||
- [Matt Stauffer](https://mattstauffer.com) - Matt Stauffer's website.
|
||||
- [Miguel Piedrafita](https://miguelpiedrafita.com) - Miguel Piedrafita's website.
|
||||
- [Blogcast](https://blogcast.host) - Tool for generating audio out of blog posts.
|
||||
- [Lichter.io (Alexander Lichter)](https://lichter.io) - Alexander Lichter's website.
|
||||
- [Rias](https://rias.be) - Rias' blog.
|
||||
- [Freek Van der Herten](https://murze.be) - Freek Van der Herten's blog.
|
||||
- [Taylor Bryant](https://taylorbryant.blog) - Taylor Bryant's blog.
|
||||
- [Oliver Davies](https://www.oliverdavies.uk) - Oliver Davies's blog.
|
||||
- [BaseCode](https://basecodefieldguide.com) - Coding advice website.
|
||||
- [Joey Beninghove](https://joey.io) - Joey Beninghove's blog.
|
||||
- [Stefan Bauer](https://stefanbauer.me) - Stefan Bauer's blog.
|
||||
- [Eyewitness.io](https://eyewitness.io) - Laravel monitoring application.
|
||||
- [Laravel Spark](https://spark.laravel.com) - Laravel Spark package's website.
|
||||
- [Sitesauce](https://sitesauce.app) - Static site generator.
|
||||
- [Milan Chheda](https://milanchheda.com) - Milan Chheda's blog.
|
||||
- [Matheus Lima](https://matheuslima.com.br) - Matheus Lima's blog.
|
||||
- [CSS Cursors](https://css-cursors.netlify.com) - CSS cursors cheat sheet.
|
||||
- [Developmint](https://developmint.de) - Development company.
|
||||
- [Rational Investment Management](https://rationalim.com) - Rational Investment Management's website.
|
||||
- [Stephen Popoola](https://stephenpopoola.uk) - Stephen Popoola's website.
|
||||
- [Vince Mitchell](http://vincemitchell.me) - Vince Mitchell's website.
|
||||
- [Marco Mark](https://www.marcomark.net) - Marco Mark's website.
|
||||
- [Nehal Hasnayeen](https://hasnayeen.github.io) - Nehal Hasnayeen's website.
|
||||
- [Plowman Craven](https://www.plowmancraven.co.uk) - Survey company.
|
||||
- [Our Name is Mud](https://www.ournameismud.co.uk) - Development company.
|
||||
- [BudgetDuo](https://budgetduo.com) - Calculator tool.
|
||||
- [Quickwords](https://quickwords.co) - Quickwords application's website.
|
||||
- [The MBR Site](https://www.thembrsite.com) - Membrane Bioreactors' website.
|
||||
- [Peter Fox](https://www.peterfox.me) - Peter Fox's website.
|
||||
- [Martin Williams](https://www.martinwilliamsart.co.uk) - Martin Williams' website.
|
||||
- [Brahms Electric Hearses](https://www.electrichearse.co.uk) - Electric Vehicle company website.
|
||||
- [Sjabloon](https://www.getsjabloon.com) - Open-source package website.
|
||||
- [Guillaume Briday](https://guillaumebriday.fr) - Guillaume Briday's blog.
|
||||
- [Hello Sun](https://hellosun.brussels) - Hello Sun's website.
|
||||
- [Onur Şuyalçınkaya](https://suyalcinkaya.me) - Onur Şuyalçınkaya's website.
|
||||
- [OpenEmu](http://openemu.org) - Website of OpenEmu.
|
||||
- [Alice's Magical Maze](https://alice.thomasverhelst.be/game) - Online game.
|
||||
- [sleeplessmind.info](https://sleeplessmind.info) - A cool website.
|
||||
- [The Speedcube Site](https://speedcube.site) - Cubing platform.
|
||||
- [Woburn Mosaic](https://www.woburnmosaic.co.uk) - Contemporary art gallery.
|
||||
- [Hunsbury Hot Tubs](https://www.hunsburyhottubs.co.uk) - Family business.
|
||||
- [DigitalDam](https://digitaldam.ca) - Automated backup/snapshot scheduling for DigitalOcean droplets.
|
||||
- [SlidesGo](https://slidesgo.com) - Google Slides and Powerpoint templates.
|
||||
- [BuildPulse](https://buildpulse.io) - GitHub app helping you win the fight against flaky builds.
|
||||
- [ScrumGenius](https://scrumgenius.com) - Slack and Microsoft Teams stand-up automation.
|
||||
- [AwesomeTechStack](https://awesometechstack.com) - Techstack anaylizer tool.
|
||||
- [Allan White](https://allanwhite.design/) - Allan White's website.
|
||||
- [Dance of Dawn](https://www.danceofdawn.com/) - Dance of Dawn website.
|
||||
|
||||
|
||||
## Contribute
|
||||
|
||||
Contributions welcome! Read the [contribution guidelines](contributing.md) first.
|
||||
Contributions welcome! Read the [contribution guidelines](contributing.md) first.
|
||||
|
||||
|
||||
## License
|
||||
|
||||
[](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.
|
||||
To the extent possible under law, [NiftyCo](https://aniftyco.com) has waived all copyright and related or neighboring rights to this work.
|
||||
|
||||
Reference in New Issue
Block a user