How To Use Tailwind In Vite

Introduction

Creating a project can be quite daunting as we know it, now creating a project using a new technology could be one of uttermost difficulty. Technology as we know of now is evolving and it could be quite a task to keep up with these trends.

Vite has been introduced as a technology that helps with the run time and creating a react application using create-react-app. As developers we often make use of css in the design of websites, but as we know it there have been recent developments of css frameworks such as tailwind that help in efficient development.

Installation

To get started with, vite has to be started in the terminal using this code sample:

With npm

npm create vite@latest

With yarn

yarn create vite

With PNPM

pnpm create vite

A user could also decide to use templates using the following code:

npm 6.x

npm create vite@latest my-vue-app --template vue

npm 7+, extra double-dash is needed:

npm create vite@latest my-vue-app -- --template vue

yarn

yarn create vite my-vue-app --template vue

pnpm

pnpm create vite my-vue-app --template vue

Getting Started

To get started with vite, I have also included images that will be helpful in navigating the process in installation as follows:

The image below showcases the first process in using vite which is choosing the project name as follows:

Below we can see the second process, which involves choosing the package name:

We can also see the process of choosing the framework being used as follows:

After selecting a framework, the user will v=be asked to choose a language desired in being used:

Finally, we can then see that our application has been created and we can then carry out the final process of running the application showcased below:

Below is an image showing the folder containing the files created using vite:

Installing and using Tailwind

As earlier mentioned, tailwind is a CSS framework, created to help in a better experience for the users and also for the developer. To install tailwind, the following processes should be carried out:

Install Tailwind CSS

Install tailwindcss and then generate your tailwind.config.js and postcss.config.js files as follows:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configuring the template paths

The next step is setting the paths to the template files in your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Adding the Tailwind directives to your CSS file

After configuring the path the next step is to add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file as shown:

@tailwind base;
@tailwind components;
@tailwind utilities;

Starting the build process

Run your build process using npm run dev

npm run dev

Using Tailwind in your project

You can then start using Tailwind’s utility classes to style your content:

export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

Conclusion

In conclusion, vite and tailwind have have been received by the developer community and it is important to note that there have been numerous complains on stackoverflow about the above not working for specific individuals. And if you notice this, it's important to ensure the tailwind.config.js file is changed to tailwind.config.cjs as shown in the image below.

Happy coding !