Tailwind

Let’s start with the fact that I’m a huge fan of Tailwind. I don’t really like keeping my styles in separate files because it takes up too much space on my screen. Plus, I don’t want to constantly keep track of the latest CSS features and which ones work on different browsers. With Tailwind, everything just works perfectly and is right there at the div I want to style. And don’t even get me started on some CSS conventions like BEM…

Installation

So, being myself, the first thing I did was run yarn add tailwind. But then I realized I had no idea what to do next. Quick yarn remove tailwind and we are good to go. Fortunately, the Astro docs have a great page on integrating Tailwind, and it basically just involves running yarn astro add tailwind. I quickly tested whether any of my previous styles written in pure CSS were broken, and of course, they were. Wondered why for a moment, then I remembered that Tailwind purges many of the basic styles for HTML elements like h tags and buttons, and so on.

Basic common styles

At this point, I wanted to add some basic styles to my h tags for the purpose of writing blog posts. Since Astro automatically renders Markdown files as HTML, I couldn’t add classes even if I wanted to.

To achieve this, I needed to edit the Astro config integrations object to look like this: integrations: [react(), tailwind({ applyBaseStyles: false })]. With this line, Tailwind styles wouldn’t be automatically added to each page. Instead, I refactored my global CSS file and added the necessary Tailwind directives: @tailwind base; @tailwind components; @tailwind utilities;. Then, I added an @layer base {} object where I specified the desired shared styles for headings. Everything worked out great and every piece of information I needed was easily accessible in astro docs.

Dark mode

The next step was to refactor my theme toggle component to work with Tailwind, and it was surprisingly quick. All I had to do was store the theme value (light or dark) in localStorage and add the dark CSS class to the HTML whenever the dark theme was active. The Tailwind docs were really helpful in guiding me through the process smoothly.

Formatting

As amazing as Tailwind is, it can become messy when applying many classes to a single div. Luckily, there’s a Tailwind plugin called prettier-plugin-tailwindcss that helps with that.

Unfortunately the process of adding this plugin was terrible. The documentation simply states to run a command to add this plugin from npm along with prettier, and it should work automatically. Unfortunately, it didn’t work for me. I tried manually specifying the plugins in the .prettierrc file, and even attempted using an older version of Prettier as suggested by someone on GitHub. I removed and added these packages multiple times and even reloaded the VS Code window, but it still didn’t work. Fortunately, while I had to go for a walk to nearest Allegromat pick up a package, I had a brilliant idea.

Solution

I had previously come across this really cool next.js starter project called create t3 appand it’s a fantastic tool that generates all the necessary boilerplate code, allowing you to start coding right away. So, I decided to create a new project using this tool. Then, I copied the versions of prettier and prettier-plugin-tailwindcss along with the prettier.config.cjs file into my project. Surprisingly, it worked like a charm. I still don’t know what went wrong with my previous approach, but honestly, at this point, I’m just relieved that it’s working smoothly.

For anyone interested, my config of this plugin below:

// prettier.config.cjs
/** @type {import("prettier").Config} */
const config = {
  plugins: [require.resolve('prettier-plugin-tailwindcss')],
};

module.exports = config;