mirror of
https://github.com/aniftyco/awesome-tailwindcss.git
synced 2025-12-09 22:35:35 +00:00
dc3f60a46d
Hey! This PR adds a new item to the open-source list. It differs from the other create-react-app items in the list as it adds `TailwindCSS` to the react-scripts itself. This way it is even possible to add `PurgeCSS` for production builds. To create a new project: ```bash npx create-react-app --scripts-version=react-scripts-tailwindcss my-app ```
Awesome Tailwind CSS 
A curated list of awesome things related to Tailwind CSS
Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces.
Contents
Resources
- Tailwind Official Site
- Tailwind Official Repo
- Discussion Repo
- Webpack Starter Project
- Gusts - Tailwind CSS Playground
- Laravel Frontend Preset
- Ruby on Rails Example Project
- Tailwind Components
- Tailwind Themes
- Tailwind Cheat Sheet
- Alfred Workflow - Search Tailwind Docs with Alfred
- ng-tailwindcss - The happy marriage of Tailwind CSS with Angular CLI
- Tailwind Toolbox - Starter Templates
- Tailwind Templates
- Laravel Dark Tailwind Preset
- Add Your Item
Projects Using Tailwind CSS
Open Source
- Tailwind Jekyll Starter Kit
- Tailwind Gulp Starket Kit
- Tailwind Fiddle
- Wordpress Tailwind CSS + Google PWA
- Create React Native App Tailwind
- Gatsby Starter Tailwind
- Gatsby Tailwind CSS Emotion Starter
- Create React App Tailwind
- Jaxli - Feature Request System
- Goodwork - Project Management & Collaboration Tool
- Seminyak Hugo Theme
- Stitches - Website Generator with Tailwind
- Dogpatch - WordPress starter + Webpack, Vue, Babel and Tailwind CSS
- Adds Tailwind CSS to your Ember app or addon
- Create React App + Tailwind CSS + EmotionJS
- Statusfy: Statusfy is a Status Page System, easy to use and completely Open Source.
- Todolist - Laravel, Vue and Tailwind CSS
- Create React App, included with TailwindCSS and PurgeCSS
- Add Your Item
Apps/Websites
- Merched.com
- NiftyCo
- Josh Manders
- Matt Stauffer
- Miguel Piedrafita
- Webslides
- Lichter.io (Alexander Lichter)
- Rias
- Freek Van der Herten
- Taylor Bryant
- Oliver Davies
- BaseCode
- Joey Beninghove
- Stefan Bauer
- Jim Shannon
- Eyewitness.io
- Laravel Spark
- Snaptier
- Milan Chheda
- Matheus Lima
- CSS Cursors
- Developmint
- Rational Investment Management
- Stephen Popoola
- Laraboost
- Vince Mitchell
- Marco Mark
- Nehal Hasnayeen
- Plowman Craven
- Erik Campobadal
- Our Name is Mud
- BudgetDuo
- Quickwords
- The MBR Site
- Natures Finest Pet Supplies Holding Page
- Peter Fox
- Martin Williams
- Brahms Electric Hearses
- Woburn Mosaic Holding Page
- Crypto Contributors
- Sjabloon
- Guillaume Briday
- Hello Sun
- Add Your Item
Tools
- Color shades generator
- Color palette generator
- Zeplin Config & Class generator
- Tailwind CSS IntelliSense for VS Code
- Tailwind CSS Styled Snippets for VS Code
- Tailwind CSS IntelliSense for (neo)vim
- Add Your Item
Components & Libraries
- Convert Bootstrap CSS code to Tailwind CSS code
- Use Tailwind CSS with CSS-in-JS
- tails-ui
- Toggle switch
- Gatsby Plugin Tailwind CSS
- Pagination Template For Laravel
- Add Your Item
Plugins
- Aspect Ratio
- Card
- Fluid
- Flexbox Order
- Spinner
- Transitions - 1
- Transitions - 2
- Transitions - 3
- Bootstrap Tables
- Visually Hidden
- Writing Mode
- Alpha
- Cursor Extended
- Blend Mode
- Object Fit
- Image Rendering
- Text Indent
- Triangle After
- CSS Color Vars
- Responsive Embed
- Object Position
- Accessibility
- Layout
- Gradients - 1
- Gradients - 2
- Border Gradient
- Typography
- Transforms
- Filters
- Important
- Scrims
- Grid
- TailwindCSS variables - Transform Tailwind config file to CSS variables.
- Spaced Items - Add fixed margins to all container items except last one.
- Heropatterns - Streamlined integration between tailwindcss and heropatterns
- Caret Color - Coloring carets with tailwindcss colors
- Direction - RTL & LTR direction variants for Tailwind.
- Add Your Item
Demos & Samples
- Tailwind CSS - Building a Login Page
- Rebuilding Laravel.io with Tailwind CSS
- Rebuilding Coinbase with Tailwind CSS - Codepen.
- Creating a modal dialog with Tailwind CSS
- Rebuilding FreshBooks with Tailwind CSS
- PingPing - We build a Login using Tailwind CSS
- Setting Up Tailwind in a Laravel Project
- How to Build a Vue.js Component With Tailwind in a Laravel Project
- Build a Customizable Vue.js Modal with Tailwind CSS
- Building a Nav with Tailwind CSS
- How to Style a Form With Tailwind CSS
- Building a Photo Gallery With CSS Grid and Tailwind CSS
- Create a Sticky Footer Using Tailwind CSS
- Interactive Tailwind + Vue Responsive Navbar
- Collection of marketing site templates
- Plugin Examples (Official)
- Rebuilding Twitter with Tailwind CSS - CodePen.
- Rebuilding YouTube with Tailwind CSS + plugins
- How to Add Tailwind CSS to an Ember App
- Laracasts Weekly Stream: Tailwind
- Rebuilding Netlify with Tailwind CSS
- Rebuilding Resolute
- How to setup Tailwind CSS in Sage (WordPress starter theme)
- More experimentation with Tailwind CSS
- Using Tailwind With GatsbyJS
- Add Your Item
Contribute
Contributions welcome! Read the contribution guidelines first.
License
To the extent possible under law, NiftyCo has waived all copyright and related or neighboring rights to this work.