Using TailwindCSS in Neovim

Thu Feb 29 2024

2 min read

I'll tell you why TailwindCSS is so great, and how to make it even better.

Introduction

TailwindCSS aims to solve the age old problem of CSS maintability, and its popularity is testament to how well it achieves this. With Tailwind in your project, there is no need to waste effort on naming classes, no need to jump between .html and .css files, and most importantly, no need to change your styling technique between projects. The impact of this is hard to understate; Tailwind really will streamline your web-dev process.

Language Server Protocol (LSP)

If you didn’t know, Neovim now has built in LSP support, and using this with Tailwind is great. My setup is the fairly standard interaction between the following three plugins,

which works very well. This setup means that I always have a full list of Tailwind class suggestions, preventing numerous trips to the documentation. If you’re new to Tailwind, this is an absolutely non-negotiable.

Prettier formatting

With the overall aim of maintaining consistency in the styling process, prettier is an integral piece in the puzzle. With Tailwind, you’re writing the same class names in every project, so why not have these class names in the same order? Prettier has a plugin called prettier-plugin-tailwindcss, which solves exactly this problem. With this plugin, every time prettier runs on a document the classes will be rearranged such that they appear in the order which they are applied in postcss.

I have autoformatting enabled in Neovim through none-ls (the daughter project of null-ls), so every time I add a style, I know it’s going in the `right’ place.

Theme configuration

Tailwind gives you the option to extend your theme, with the following,

export default {
  theme: {
    extend: {
      /* theme config */
    },
  },
}

I honestly think this is a bad idea. One of the best ways to ensure that your design/development remains consistent is to remove your ability to do otherwise. If you know exactly the colours you’ll be using in your design, then don’t extend your theme, just set it. You don’t need 9 shades of every colour in the Tailwind default theme, if you’re never going to use them. This will not only unclog your LSP suggestions, but also make it impossible for you to be inconsistent.

Conclusion

Not may groundbreaking points here, but all good ones in my opinion. Also I wanted to write about something other than TikZ.