Styling with Tailwind

Tailwind CSS is a popular utility-based CSS framework that we can use to build and style user interfaces by using and combining predefined classes. Tailwind is very scalable due to abstracting the writing of CSS rules, which provides consistency and maintainability where it’s used. Let’s take a look at how we can apply Tailwind CSS to our little application.

The installation guide (https://tailwindcss.com/docs/guides/vite) covers all of the steps we need to execute:

1. First, we will have to add the dependencies to the project:

   npm install -D tailwindcss postcss autoprefixer

   We’re installing Tailwind, but also the tooling to allow Vite to process the stylesheet using PostCSS. PostCSS is a powerful JS tool for transforming CSS using JavaScript (https://postcss.org/).

2. Next, we’ll initialize the default configuration for Tailwind:

   npx tailwindcss init -p

   The command will have generated two configuration files for us (a PostCSS config...