mirror of
https://github.com/aniftyco/awesome-tailwindcss.git
synced 2025-12-11 16:53:00 +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
|
# 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!
|
## General Guidelines
|
||||||
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)`
|
|
||||||
|
|
||||||
|
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:
|
- Every item MUST have the following format: `[Item Name](link) - Description.`.
|
||||||
- Resources
|
- Every name and description must be in english.
|
||||||
- Projects Using Tailwind CSS
|
- Every mention to Tailwind CSS must use the exact name `Tailwind CSS`, except for plugin/library/product names.
|
||||||
- Open Source
|
- ✖ `TailwindCSS`
|
||||||
- Apps/Websites
|
- ✖ `tailwind CSS`
|
||||||
- Components & Libraries
|
- ✖ `Tailwind`
|
||||||
- Plugins
|
- Descriptions must not start with "The", "A" or similar.
|
||||||
- Demos & Samples
|
- ✔ 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
|
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
|
|
||||||
|
|
||||||
Open Source section gives the possibility for developers to contribute and be a part of an opensource project using their knowledge of Tailwind.
|
## UI Libraries & Components
|
||||||
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.
|
|
||||||
|
|
||||||
The link provided should be the link of the github repository, not the demo.
|
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**.
|
||||||
If you consider your project finished, and it does not need any contributions, consider the apps/website category.
|
|
||||||
|
|
||||||
#### Apps/Websites
|
## Resources
|
||||||
|
|
||||||
Apps/Websites gives the opportunity to showcase the awesome things we can build with Tailwind.
|
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.
|
||||||
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.
|
|
||||||
|
|
||||||
### 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.
|
||||||
|
|||||||
514
readme.md
514
readme.md
@@ -7,261 +7,277 @@ Tailwind CSS is a utility-first CSS framework for rapidly building custom user i
|
|||||||
|
|
||||||
## Contents
|
## 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)
|
- [Plugins](#plugins)
|
||||||
- [Demos & Samples](#demos--samples)
|
- [UI Libraries & Components](#ui-libraries--components)
|
||||||
|
- [Resources](#resources)
|
||||||
|
- [Useful Links](#useful-links)
|
||||||
## Resources
|
- [Tools](#tools)
|
||||||
|
- [Starters, Templates & Themes](#starters-templates--themes)
|
||||||
- [Tailwind Official Site](https://tailwindcss.com)
|
- [IDE Extensions](#ide-extensions)
|
||||||
- [Tailwind Official Repo](https://github.com/tailwindcss/tailwindcss)
|
- [Open-Source Projects](#open-source-projects)
|
||||||
- [Tailwind UI](https://tailwindui.com)
|
- [Learning](#learning)
|
||||||
- [Discussion Repo](https://github.com/tailwindcss/discuss)
|
- [Apps & Websites](#apps--websites)
|
||||||
- [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)
|
|
||||||
|
|
||||||
|
|
||||||
## Plugins
|
## Plugins
|
||||||
|
|
||||||
- [Custom Forms (Official)](https://github.com/tailwindcss/custom-forms) - A better base for styling form elements with Tailwind CSS.
|
- [Custom Forms (Official)](https://github.com/tailwindcss/custom-forms) - Adds better default styles to form elements.
|
||||||
- [Aspect Ratio](https://github.com/webdna/tailwindcss-aspect-ratio)
|
- [benface's transitions](https://github.com/benface/tailwindcss-transitions) - Adds configurable transition utilities, with or without CSS variables.
|
||||||
- [Card](https://github.com/NathanHeffley/tailwindcss-card)
|
- [Theming (Dark/Light)](https://github.com/hawezo/tailwindcss-theming) - Adds powerful theming capabilities with CSS variables and `prefers-color-scheme`.
|
||||||
- [Fluid](https://github.com/bradlc/tailwindcss-fluid)
|
- [Text Indent](https://github.com/hacknug/tailwindcss-text-indent) - Adds `text-indent` utilities.
|
||||||
- [Flexbox Order](https://github.com/035media/tailwindcss-flexbox-order)
|
- [Transforms](https://github.com/benface/tailwindcss-transforms) - Adds `transform` utilities.
|
||||||
- [Spinner](https://github.com/aniftyco/tailwindcss-spinner)
|
- [Image Rendering](https://github.com/hacknug/tailwindcss-image-rendering) - Adds `image-rendering` utilities.
|
||||||
- [Transitions - 1](https://github.com/glhd/tailwindcss-plugins)
|
- [Cursor Extended](https://github.com/hacknug/tailwindcss-cursor-extended) - Extends `cursor` utilities.
|
||||||
- [Transitions - 2](https://github.com/webdna/tailwindcss-transition)
|
- [Grid](https://github.com/chrisrowe/tailwindcss-grid) - Adds CSS grids utilities.
|
||||||
- [Transitions - 3](https://github.com/benface/tailwindcss-transitions)
|
- [Filters](https://github.com/benface/tailwindcss-filters) - Adds `filter` utilities.
|
||||||
- [Bootstrap Tables](https://github.com/drehimself/tailwindcss-tables)
|
- [Spinner](https://github.com/aniftyco/tailwindcss-spinner) - Adds a spinner utility.
|
||||||
- [Visually Hidden](https://github.com/webdna/tailwindcss-visuallyhidden)
|
- [Elevation](https://github.com/jonaskay/tailwindcss-elevation) - Adds [Material UI `elevation`](https://material.io/design/environment/elevation.html) utilities.
|
||||||
- [Writing Mode](https://github.com/magicspon/tailwindcss-writing-mode)
|
- [Caret Color](https://github.com/naoray/tailwind-caret-color) - Adds `caret` color utilities.
|
||||||
- [Alpha](https://github.com/bradlc/tailwindcss-alpha)
|
- [Direction](https://github.com/RonMelkhior/tailwindcss-dir) - Adds `RTL` and `LTR` variants.
|
||||||
- [Cursor Extended](https://github.com/hacknug/tailwindcss-cursor-extended)
|
- [Touch](https://github.com/SteadfastCollective/tailwindcss-touch) - Adds `touch` variants.
|
||||||
- [Blend Mode](https://github.com/hacknug/tailwindcss-blend-mode)
|
- [Blend Mode](https://github.com/hacknug/tailwindcss-blend-mode) - Adds `blend-mode` utilities.
|
||||||
- [Object Fit](https://github.com/hendrikeng/tailwindcss-object-fit)
|
- [Colorize](https://github.com/philippbosch/tailwindcss-colorize) - Adds `filter` utilities.
|
||||||
- [Image Rendering](https://github.com/hacknug/tailwindcss-image-rendering)
|
- [Writing Mode](https://github.com/magicspon/tailwindcss-writing-mode) - Adds `writing-mode` utilities.
|
||||||
- [Text Indent](https://github.com/hacknug/tailwindcss-text-indent)
|
- [Responsive Embed](https://github.com/drdogbot7/tailwindcss-responsive-embed) - Adds a `responsive-embed` component.
|
||||||
- [Triangle After](https://github.com/chrisrowe/tailwindcss-triangle-after)
|
- [Aspect Ratio](https://github.com/webdna/tailwindcss-aspect-ratio) - Adds `aspect-ratio` utilities.
|
||||||
- [CSS Color Vars](https://github.com/n1kk/tailwind-color-vars)
|
- [Hyphens](https://github.com/philippbosch/tailwindcss-hyphens) - Adds `hyphens` utilities.
|
||||||
- [Responsive Embed](https://github.com/drdogbot7/tailwindcss-responsive-embed)
|
- [Border Gradients](https://github.com/cossssmin/tailwindcss-border-gradients) - Adds `border-image` gradient utilities.
|
||||||
- [Object Position](https://github.com/hacknug/tailwindcss-object-position)
|
- [RFS](https://github.com/aerni/tailwindcss-rfs) - Adds [`RFS`](https://github.com/twbs/rfs) utilities.
|
||||||
- [Accessibility](https://github.com/jack-pallot/tailwindcss-accessibility)
|
- [Font Variant Numeric](https://github.com/philippbosch/tailwindcss-font-variant-numeric) - Adds `font-variant-numeric` utilities.
|
||||||
- [Layout](https://github.com/benface/tailwindcss-layout)
|
- [Dark Mode](https://github.com/ChanceArthur/tailwindcss-dark-mode) - Adds `dark` variants based on the `prefers-color-scheme` media query.
|
||||||
- [Gradients - 1](https://github.com/benface/tailwindcss-gradients)
|
- [Vue.js](https://github.com/opdavies/tailwindcss-vuejs) - Adds visibility classes that work with Vue.js's `v-cloak` directive.
|
||||||
- [Gradients - 2](https://github.com/lorisleiva/tailwindcss-plugins/tree/master/gradients)
|
- [List Reset](https://github.com/opdavies/tailwindcss-list-reset) - Re-adds the `list-reset` class that was removed prior to Tailwind CSS 1.0.
|
||||||
- [Border Gradients](https://github.com/cossssmin/tailwindcss-border-gradients)
|
- [Fluid](https://github.com/bradlc/tailwindcss-fluid) - Adds fluid sizing utilities.
|
||||||
- [Typography](https://github.com/benface/tailwindcss-typography)
|
- [Flexbox Order](https://github.com/035media/tailwindcss-flexbox-order) - Extends `order` utilities.
|
||||||
- [Transforms](https://github.com/benface/tailwindcss-transforms)
|
- [benface's gradients](https://github.com/benface/tailwindcss-gradients) - Adds gradient utilities.
|
||||||
- [Filters](https://github.com/benface/tailwindcss-filters)
|
- [lorisleiva's gradients](https://github.com/lorisleiva/tailwindcss-plugins/tree/master/gradients) - Adds background gradient utilities.
|
||||||
- [Important](https://github.com/chasegiunta/tailwindcss-important)
|
- [Alpha](https://github.com/bradlc/tailwindcss-alpha) - Adds alpha color variants.
|
||||||
- [Scrims](https://github.com/brettgullan/tailwindcss-scrims)
|
- [Bootstrap Tables](https://github.com/drehimself/tailwindcss-tables) - Adds table utilities based on Bootstrap's tables.
|
||||||
- [Grid](https://github.com/chrisrowe/tailwindcss-grid)
|
- [Typography](https://github.com/benface/tailwindcss-typography) - Adds typography utilities.
|
||||||
- [TailwindCSS variables](https://github.com/omarkhatibco/tailwind-css-variables) - Transform Tailwind config file to CSS variables.
|
- [Card](https://github.com/NathanHeffley/tailwindcss-card) - Adds card components.
|
||||||
- [Spaced Items](https://github.com/n1kk/tailwindcss-spaced-items) - Add fixed margins to all container items except last one.
|
- [webdna's transitions](https://github.com/webdna/tailwindcss-transition) - Adds configurable transition utilities.
|
||||||
- [Heropatterns](https://github.com/AndreaMinato/tailwind-heropatterns) - Streamlined integration between tailwindcss and heropatterns
|
- [glhd's transitions](https://github.com/glhd/tailwindcss-plugins) - Adds basic transition utilities.
|
||||||
- [Caret Color](https://github.com/naoray/tailwind-caret-color) - Coloring carets with tailwindcss colors
|
- [Triangle After](https://github.com/chrisrowe/tailwindcss-triangle-after) - Adds CSS triangles utilities.
|
||||||
- [Direction](https://github.com/RonMelkhior/tailwindcss-dir) - RTL & LTR direction variants for Tailwind.
|
- [Scrims](https://github.com/brettgullan/tailwindcss-scrims) - Adds scrims utilities.
|
||||||
- [Touch](https://github.com/SteadfastCollective/tailwindcss-touch) - Additional variants for touch based media queries.
|
- [Colors to CSS Variables](https://github.com/n1kk/tailwind-color-vars) - Exports color configuration to CSS Custom Properties.
|
||||||
- [Elevation](https://github.com/jonaskay/tailwindcss-elevation) - Elevation classes taken from Material Components.
|
- [CSS Variables](https://github.com/omarkhatibco/tailwind-css-variables) - Exports configuration to CSS Custom Properties.
|
||||||
- [Localized](https://github.com/hdodov/tailwindcss-localized) - Variant for utilities based on site language.
|
- [Spaced Items](https://github.com/n1kk/tailwindcss-spaced-items) - Adds `spaced` components that add fixed margins to all container items, except the last one.
|
||||||
- [Skip link](https://github.com/opdavies/tailwindcss-skip-link) - Adds an accessible 'skip to main content' link
|
- [Heropatterns](https://github.com/AndreaMinato/tailwind-heropatterns) - Ads [Hero Patterns](https://www.heropatterns.com) components.
|
||||||
- [List Reset](https://github.com/opdavies/tailwindcss-list-reset) - Re-adds the `list-reset` class that was removed prior to Tailwind 1.0.
|
- [Localized](https://github.com/hdodov/tailwindcss-localized) - Adds variants based on the HTML `lang` attribute, to use utilities only with certain languages.
|
||||||
- [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.
|
- [Skip link](https://github.com/opdavies/tailwindcss-skip-link) - Adds a *Skip to main content* accessible component.
|
||||||
- [Pseudo](https://github.com/Log1x/tailwindcss-pseudo) - Additional customizable variants for pseudo selectors.
|
- [Pseudo](https://github.com/Log1x/tailwindcss-pseudo) - Adds custom variants to Tailwind CSS's configuration.
|
||||||
- [Custom Native](https://github.com/SirNavith/tailwindcss-custom-native) - Custom utilities with little configuration
|
- [Custom Native](https://github.com/SirNavith/tailwindcss-custom-native) - Leverages Tailwind CSS's configuration to allow the creation of utilities.
|
||||||
- [Font Variant Numeric](https://github.com/philippbosch/tailwindcss-font-variant-numeric) - Utility classes for `font-variant-numeric`
|
- [Truncate Multiline](https://github.com/jhta/tailwindcss-truncate-multiline) - Adds utilities to truncate multi-line text elements.
|
||||||
- [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)
|
|
||||||
|
|
||||||
## 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/)
|
- 🛑 [Visually Hidden](https://github.com/webdna/tailwindcss-visuallyhidden) - Adds screen reader utilities.
|
||||||
- [Rebuilding Laravel.io with Tailwind CSS](https://www.youtube.com/watch?v=ZrRRMBaz5Z0)
|
- 🛑 [Object Fit](https://github.com/hendrikeng/tailwindcss-object-fit) - Adds `object-fit` utilities.
|
||||||
- [Rebuilding Coinbase with Tailwind CSS](https://www.youtube.com/watch?v=7gX_ApBeSpQ) - [Codepen](https://codepen.io/adamwathan/pen/RxWrZr).
|
- 🛑 [Object Position](https://github.com/hacknug/tailwindcss-object-position) - Adds `object-position` utilities.
|
||||||
- [Creating a modal dialog with Tailwind CSS](https://codeburst.io/creating-a-modal-dialog-with-tailwind-css-42722c9aea4f)
|
- 🛑 [Accessibility](https://github.com/jack-pallot/tailwindcss-accessibility) - Adds screen reader utilities.
|
||||||
- [Rebuilding FreshBooks with Tailwind CSS](http://joey.io/rebuilding-freshbooks-with-tailwind-css/)
|
- 🛑 [Layout](https://github.com/benface/tailwindcss-layout) - Adds some layout utilities.
|
||||||
- [PingPing - We build a Login using Tailwind CSS](https://stefanbauer.me/building-pingping/we-build-a-login-using-tailwindcss/)
|
- 🛑 [Important](https://github.com/chasegiunta/tailwindcss-important) - Adds an `important` variant.
|
||||||
- [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)
|
## UI Libraries & Components
|
||||||
- [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/)
|
- [tails-ui](https://github.com/knipferrc/tails-ui) - React UI library using 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)
|
- [VueTailwind](https://github.com/alfonsobries/vue-tailwind) - Vue.js UI library using Tailwind CSS.
|
||||||
- [Create a Sticky Footer Using Tailwind CSS](https://jimshannon.me/blog/create-a-sticky-footer-using-tailwind-css)
|
- [Tailwind Toolbox](https://www.tailwindtoolbox.com) - Tailwind CSS templates, components and resources.
|
||||||
- [Interactive Tailwind + Vue Responsive Navbar](https://codepen.io/joshmanders/pen/PQQBoR)
|
- [Tailwind Templates](https://www.tailwindtemplates.io) - Tailwind CSS components.
|
||||||
- [Collection of marketing site templates](https://github.com/colmtuite/tailwind-template)
|
- [jQuery + Tailwind Checkbox Toggle](https://craigerskine.github.io/jquery-tailwind-checkbox-toggle) - Switches using jQuery and Tailwind CSS.
|
||||||
- [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).
|
## Resources
|
||||||
- [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/)
|
### Useful Links
|
||||||
- [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)
|
- [Tailwind CSS website](https://tailwindcss.com) - Official Tailwind CSS website.
|
||||||
- [Rebuilding Resolute](https://www.youtube.com/watch?v=banq3TfAPYk)
|
- [Tailwind CSS on GitHub](https://github.com/tailwindcss/tailwindcss) - Official Tailwind CSS repository.
|
||||||
- [How to setup Tailwind CSS in Sage (WordPress starter theme)](https://roots.io/guides/how-to-setup-tailwind-css-in-sage/)
|
- [Tailwind UI](https://tailwindui.com) - Component library made with Tailwind CSS.
|
||||||
- [More experimentation with Tailwind CSS](https://www.youtube.com/watch?v=nBzfVK3QUzM)
|
- [Discussion Repository](https://github.com/tailwindcss/discuss) - Official Tailwind CSS repository for discussions.
|
||||||
- [Using Tailwind With GatsbyJS](https://dev.to/jakedohm_34/using-tailwind-with-gatsby-js-10fj)
|
- [Tailwind Components](https://tailwindcomponents.com) - Community-driven Tailwind CSS component repository.
|
||||||
- [How to setup TailwindCSS in Phoenix 1.4](https://equimper.com/blog/how-to-setup-tailwindcss-in-phoenix-1.4)
|
- [Built With Tailwind](https://builtwithtailwind.com/) - Community-driven collection of awesome websites built with Tailwind CSS.
|
||||||
- [jQuery + Tailwind Checkbox Toggle](https://craigerskine.github.io/jquery-tailwind-checkbox-toggle/)
|
- [Tailwind Cheat Sheet](https://umeshmk.github.io/Tailwindcss-cheatsheet) - Tailwind CSS class names, variants and directives cheat sheet.
|
||||||
- [Rebuilding Acquia’s hosting dashboard with Vue.js and Tailwind CSS](https://github.com/opdavies/rebuilding-acquia)
|
- [Tailwind Cheat Sheet](http://nerdcave.com/tailwind-cheat-sheet) - Tailwind CSS class names cheat sheet.
|
||||||
- [Rebuilding Bartik (Drupal’s default theme) with Vue.js and Tailwind CSS](https://www.oliverdavies.uk/articles/rebuilding-bartik-with-vuejs-tailwind-css)
|
- [tailwind.run](https://tailwind.run) - Tailwind CSS fiddle with built-time features (online).
|
||||||
- [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/)
|
### Tools
|
||||||
- [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/)
|
- 🌍🔧 [Color shades generator](https://javisperez.github.io/tailwindcolorshades) - Color shades generator for Tailwind CSS (online).
|
||||||
- [Let’s Build: with Tailwind CSS Dribbble Shot](https://web-crunch.com/lets-build-tailwind-css-dribbble-shot/)
|
- 🌍🔧 [Color palette generator](https://adevade.github.io/color-scheme-generator) - Color palette generator that outputs a color configuration for Tailwind CSS (online).
|
||||||
- [Let’s Build: With Tailwind CSS – Tweet](https://web-crunch.com/lets-build-tailwind-css-tweet/)
|
- 🌍 [Tailwind Button Playground](https://minthemiddle.github.io/tailwind-button-playground) - Playground for theming a button with Tailwind CSS (online).
|
||||||
- [How to Extend Tailwind CSS](https://web-crunch.com/how-to-extend-tailwind-css/)
|
- 🌍🔧 [Stitches](https://stitches.hyperyolo.com/) - Template generator with Tailwind (online).
|
||||||
- [Add Your Item](https://github.com/merchedhq/awesome-tailwindcss/pulls)
|
- 🌍🔧 [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
|
## Contribute
|
||||||
@@ -273,4 +289,4 @@ Contributions welcome! Read the [contribution guidelines](contributing.md) first
|
|||||||
|
|
||||||
[](http://creativecommons.org/publicdomain/zero/1.0)
|
[](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