Hello everyone, my dear readers. I hope everyone is well. This weekend I will show you how to install vue vite and tailwind css project for beginners. I will try to use simple language as much as I can. If you are ready follow me step by step
- First, make sure you have Node.js and npm (Node Package Manager) installed on your system. You can check this by running node -v and npm -v in your command prompt or terminal.
- Create a new directory for your project and navigate into it using your command prompt or terminal. You can do this with the mkdir and cd commands, respectively.
mkdir my-vue-tailwind-projectcd my-vue-tailwind-project
- Initialize a new npm package in your project directory. This will create a package.json file that will keep track of your project's dependencies.
npm init -y
- Install Vue and the required development dependencies for Vite.
npm install --save-dev vite @vue/compiler-sfc
- Install Tailwind CSS and its dependencies.
npm install --save-dev tailwindcss postcss autoprefixer
- Initialize Tailwind CSS by creating a configuration file.
npx tailwindcss init
- Create a new src directory and add an index.html file to it.
mkdir srctouch src/index.html
In the index.html file, add the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>My Vue Tailwind Project</title>
<link rel="stylesheet" href="./dist/styles.css">
</head>
<body>
<div id="app">
</div>
<script src="./dist/main.js"></script>
</body>
</html>
- Create a new src directory and add a main.js file to it.
touch src/main.js
In the main.js file, add the following:
import { createApp } from 'vue'import App from './App.vue'import './index.css'createApp(App).mount('#app')
- Create a new src directory and add an App.vue file to it.
touch src/App.vue
In the App.vue file, add the following:
<template>
<div class="container mx-auto">
<h1 class="text-4xl font-bold">My Vue Tailwind Project</h1>
<p class="text-lg mt-4">Welcome to my project!</p>
</div>
</template>
<script>export default { name: 'App',}</script>
- Create a new src directory and add an index.css file to it.
touch src/index.css
In the index.css file, add the following:
@tailwind base;
@tailwind components;@tailwind utilities;
- Finally, add the following scripts to your package.json file:
"scripts": { "dev": "vite", "build": "vite build"},
You can then start your development server by running:
npm run build
npm run dev
When we do all these steps together with you, we have successfully installed vue vite and tailwindcss in our project.To be together in another article. If you have any questions, please contact me.
Goodbye for now and don’t forget to be nice to yourself :)
