Here’s a basic step-by-step guide to set up a Vue 3 project with Tailwind CSS:
1. Set Up a New Vue 3 Project:
You can use Vue cmd to quickly create a new Vue 3 project. If you haven’t already installed Vue you can go through our previous article:
2. Install Tailwind CSS:
After your Vue 3 project is set up, install tailwindcss and its peer dependencies, then generate your tailwind.config.js and postcss.config.js files.:
npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p3. Configure your template paths
Add the paths to all of your template files in your tailwind.config.js file.
5. Import Tailwind CSS Styles:
Open your project’s main CSS file/Create new and import Tailwind CSS styles at the top of the file:
@tailwind base; @tailwind components; @tailwind utilities;
6. Start your build process
Run your build process with npm run dev.
npm run dev7. Start using Tailwind in your project
Start using Tailwind’s utility classes to style your content. In app.vue
<template>
<h1 class=”text-3xl font-bold underline”> Hello world! </h1>
</template>
8. Do not forget to import your CSS file inside main.js.
main.js is included in index.html file
