Setting up VS Code for Tailwind CSS and custom components

Follow me on Twitter to get more tips and tutorials!   / alchemistcamp  

Extracting out your own CSS components with Tailwind's @apply is pretty straight-forward, but there are a few things to keep in mind when working with PostCSS Import. This episode sets up a headers.css and a buttons.css file, imports them into the main file and uses them.

It also covers how to get Tailwind CSS auto-completion working with VS Code and how to set up your CSS linting to accept various Tailwind directives.

One thing I glossed over a bit in the video is the location of your custom styles. Put your custom base styles immediately after importing Tailwind base styles and put your custom components immediately after importing Tailwind components.

The episode starts from a basic Phoenix app with Tailwind CSS set up (see:    • How to set up Tailwind CSS on Phoenix   )