Portfolio Notes About

Getting into TailwindCSS

Getting into tailwind for the first time felt uncomfortable for me. I didn’t understand (and didn’t look into) the utility CSS approach. Things like AutoPrefixer, PostCSS, and PurgeCSS and configuring them shied me away from tailwind for a long time. But that was ~2 years ago. Tailwind is getting more and more popular; Installing and configuring it has become increasingly easy with time.*

I have now used TailwindCSS on a couple of projects. And I have enjoyed using it. I like not having to come up with class names and not worrying about CSS maintainability (having unused CSS in your code)

Knowing CSS will help you tremendously - I think Tailwind classes are very intuitive and need little effort.

These are the resources I found useful when learning Tailwind:

  1. Tailwind’s official guide

  2. Visual Studio Code Extensions

Visual Studio Code is my preferred text/code editor. I especially recommend using it with tailwind because of these two, incredibly useful, extensions.

Tailwind CSS IntelliSense - It gives you auto-complete for every single utility class within Tailwind. I almost never open the docs because I use this extension as in-line documentation. Start typing the thing you want to do. The suggestions will show up whenever you are writing class names. You can press Ctrl + Space to trigger auto-completions manually if they aren’t showing up automatically.

Headwind - It sorts all of your classes. It is opinionated in how it sorts them. I like that it adds structure and removes randomness. It makes finding classes predictable. Less cognitive overload.

  1. Tailwind Docs

If you’re not sure how to do the thing you want, go to the tailwind docs and take a look. Their docs are a breeze to navigate, easy to understand and beautifully made. The search is (surprisingly) very good at finding things.

  1. Dave Ceddia’s Blog Post

Tailwind CSS with Create React App. This was the blog post that got me started with my very first working tailwind project. It guided me through everything needed to set up and use Tailwind in development and production environments.

  1. Sam Selikoff’s Channel

His Best Practices and Workflow Tips videos were very helpful. Visually pleasing videos and editing on the channel too 😄.