How to Extend Tailwind CSS 🛠
Hi, My name is Andy Leverenz and I work as a Product Designer at Dribbble. For fun, I design, code, and write. Check out my blog called Web-Crunch https://web-crunch.com where I publish design and development tutorials with the occasional vlog.
====================
Tailwind CSS packs a punch as a utility-first CSS framework. Even with some amazing defaults at your disposal, there comes a time where you might need to extend the framework. In this post, learn how to extend Tailwind CSS even further.
Use Cases
Each use case below is what I would do. In no way are they meant for how you should approach it yourself. Consider these tips and tricks I have learned by working with the framework over time.
Internal/Personal approach
The first and probably obvious way to extend Tailwind is to use a CSS approach. Doing this might look like the following:
Note: In this video/example I reference the https://github.com/tailwindcss/playgr.... This uses basic dependencies to help you jump right in. In previous installments of this series I walk you through how to get it up and running. Find those linked at the end of this post.
#### Adding new utilities via CSS
New utility classes should come only after the `@tailwind` directives in your main stylesheet.
Continue reading: https://web-crunch.com/how-to-extend-...
====================
📰 Subscribe:
https://www.youtube.com/user/webcrunc...
💎🛤 Grab my new course: Hello Rails - Learn Ruby on Rails from the ground up.
https://hellorails.io
☕️ Buy me a coffee to help me keep going
https://www.buymeacoffee.com/webcrunch
💻 Previously published at:
https://web-crunch.com/how-to-extend-...
💻 Check out the blog:
https://web-crunch.com
🦄 Check out my personal site:
https://justalever.com
🚀 Links:
Weekly Newsletter: https://web-crunch.com/subscribe
Twitter: / webcrunchblog
Twitter(Personal Account): / justalever
Facebook: / webcrunchblog
Dribbble: https://dribbble.com/justalever
Github: https://github.com/justalever
Medium: / the-web-crunch
📘Check out my book on UX Design:
"LUXD: Learn User Experience Design"
https://web-crunch.com/books/luxd
📙 Check out my FREE book on Tumblr Theming:
"Pro Tumblr Theming"
https://web-crunch.com/books/ptt
💯 Need awesome web hosting? Check out cloudways. They allow me to use a variety of hosting providers and build apps with ease:
http://bit.ly/webcrunchhosting
🌊 Need more advanced hosting for Rails, PHP, Node, or other projects? Digital Ocean has you covered.
https://m.do.co/c/ee243ee15648
💎 Ruby on Rails devs, Try HatchBox.io. You'll save upwards of 50% compared to Heroku. I use it and love it!
https://hatchbox.io/?via=andy