Setting up your Vue + Tailwind project with Vite.

Hello guys, it’s been a while since I wrote anything and while I was away, I worked with different technologies. Today, I will be sharing a step-by-step procedure on how to set up your Vue + Tailwind project with Vite.

Tailwind CSS

Tailwind CSS is an open-source CSS framework and a utility-first framework packed with classes that can be composed to build any design directly in your markup. It is fast and easy to use.

Vue.js

Vue.js is a progressive model-view frontend framework used for building user interfaces and single-page applications (SPA). It is approachable, performant, easy to use, and highly versatile. Vue.js is a truly reactive, compiler-optimized rendering system that rarely requires manual optimization.

Vite

Vite.js is a rapid development tool for modern web projects. It focuses on speed and performance by improving the development experience. It uses Hot Module Replacement (HMR) for updating modules during the execution of the application, which helps speed up development time. Vite also allows you to have more control over your project’s configuration by extending the default configuration with vite.config.js or vite.config.ts. These files are located in the project's base root directory.

Getting Started

I did extensive research on easy installation of Tailwind CSS and Vite using Vue.js; you can follow the steps below for clarity and optimization.

• Start by creating a Vite project, open a new terminal and paste these commands

     npm create vite@latest my-project -- --template vue
     cd my-project
  

• Install tailwindcss and its peer dependencies via npm, and then run the init command to generate both tailwind.config.js and postcss.config.js.

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

• Configure your template paths, by adding the paths to all of your template files in your tailwind.config.js file

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

• Add the @tailwind directives for each of Tailwind’s layers to your ./src/style.css file.

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

• Start your build process by running your build process with npm run dev

  npm run dev
  

• You can start adding Tailwind utility classes to style your components !