Project Setup with Vue 3 , Vite and TailwindCSS

Hello everyone, in this article I'll basically show you how to set up your initial template for a Vue 3 project using Tailwindcss and Vite.

• Vite is a build tool that seeks to make modern web project development quicker and more efficient. you can learn more about this tool here

• Tailwind CSS is a utility-first CSS framework that includes CSS classes that may be combined to create any design right in your text. Visit their official website to learn more about this framework.

so let's get started

Please Note you node version should be "^14.18.0 || >=16.0.0"

//yarn 
  yarn create vite vue-starter-template --template vue

//npm 
  yarn create vite vue-starter-template --template vue

The above command will create the vue project template

then run the following commands

//Using yarn
cd vue-starter-template

yarn 
yarn dev

Install tailwind CSS as a dev dependencies

yarn add -D tailwindcss postcss autoprefixer

let's understand why we install the extra dependencies

• Post CSS: With JS plugins, PostCSS is a tool for style transformation. These plugins can handle variables, mixins, future CSS syntax, inline pictures, and more. They can also lint your CSS.

• To apply prefixes for you, Autoprefixer will make use of information based on the popularity and property support of the most recent browsers.

Next, run the following command to generate the tailwindcss and postcss config files `tailwind.config.cjs and postcss.config.cjs

 npx tailwindcss init -p

Configure your template paths in your tailwind.config.cjs file

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

Add the Tailwind CSS directives in your src/styles.css file

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

Now that we have updated our tailwind CSS config file, we are ready to go. If your app is already running, you can restart it by typing the command:

yarn dev

You may now begin utilizing Tailwind for your project. Add this example to your src/App.vue file to confirm yours is working as expected.

  <div class="text-center space-y-2 my-4">
    <div class="space-y-0.5">
      <p class="text-lg text-black font-semibold">Chinweike Michael</p>
      <p class="text-slate-500 font-medium">Frontend Engineer</p>
    </div>
    <button
      class="
        px-4
        py-1
        text-sm text-purple-600
        font-semibold
        rounded-full
        border border-purple-200
        hover:text-white hover:bg-purple-600 hover:border-transparent
        focus:outline-none
        focus:ring-2
        focus:ring-purple-600
        focus:ring-offset-2
      "
    >
      Message
    </button>
  </div>

I hope you all were able to get yours to work 🙂🚀.

here are my social media handles :

LinkedIn Github Twitter