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/playground. 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-tailwind-css

====================

📰 Subscribe: https://www.youtube.com/user/webcrunchblog?sub_confirmation=1

💎🛤 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-tailwind-css

💻 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: https://twitter.com/webcrunchblog Twitter(Personal Account): https://twitter.com/justalever Facebook: https://facebook.com/webcrunchblog Dribbble: https://dribbble.com/justalever Github: https://github.com/justalever Medium: https://medium.com/the-web-crunch-publication

📘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 ... https://www.youtube.com/watch?v=HVRnRp26_MQ