Article directory
foreword
Recently, I need to develop a new project, and I happened to learn Tailwindcss, so I wanted to integrate it into the new project. First, I can improve my project experience, and I can also feel the aesthetic style of tailwindcss. This article is an article about the front-end quick start project category. , please enjoy!
create project
1. Open vuetify's official website to download the project
Link: Vuetify official website quick start project
Use cmd command or console powershell command:
Note: The official website of Vuetify shall prevail. Because the time is different, the download method will be different. This article is for reference only.
yarn create vuetify
Then fill in
1. Project name (AA_Vuetify_learn)
2. Select the module to install, because I need to use routing and data warehouse, I chose Essentials (Vuetify, VueRouter, Pinia), press the up and down arrows to switch.
3. Whether to choose TS depends on the individual. I chose No, because I am not familiar with it yet and I just learned it.
4. Select the management tool to download. Don’t worry about this. It doesn’t mean that you can only run it with pnpm if you download it with pnpm. You can use npm, yar, or pnpm to start it later.
Not surprisingly, it is as follows:
Then it can be opened in the IDE tool, and the author uses webstorm.
2. Download dependencies
Execute the console command:
npm install
After it's done, you can run it
npm run dev
If there is no accident, an error will be reported:
it means that the version of vue must be above 3.2.25.
Execute the update vue version command
npm install vue@latest
If you execute npm and report an error, execute it several times. After all, it is a foreign server, or switch pnpm to execute.
After the update is completed, it is as follows
and then continue to run
npm run dev
Start successfully
3. Add tailwindcss dependency
As usual, you can directly look at the official website (for reference): Tailwind official website
First install dependencies: (execute in sequence)
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Create your configuration files
Next, generate your tailwind.config.js and postcss.config.js files:
npx tailwindcss init -p
This will create a minimal tailwind.config.js file in your project root directory:
Edit the tailwind.config.js file to look like this (add it if you don’t have it)
// tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
},
},
variants: {
extend: {
},
},
plugins: [],
}
This will also create a postcss.config.js configuration file with tailwindcss and autoprefixer configured:
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {
},
autoprefixer: {
},
},
}
Configure Tailwind to remove unused style declarations in production
In your tailwind.config.js file , configure the purge option to specify all pages and components files so that Tailwind can remove unused style declarations in production builds The styles are tree-shaked.
// tailwind.config.js
module.exports = {
purge: [],
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
},
},
variants: {
extend: {
},
},
plugins: [],
}
Introduce Tailwind in your CSS
Create a ./src/index.css file and use the @tailwind directive to include Tailwind's base, components and utilities styles, replacing the original file content.
/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Tailwind will translate these directives at build time into all style files generated based on your configured design system.
Finally, make sure your CSS file is imported into your ./src/main.js file.
// src/main.js
import {
createApp } from 'vue'
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')
Then run, you're all done! Now, when you run npm run dev, Tailwind CSS is ready to use in your Vue 3 and Vite projects.
npm run dev
If you see the following this is a success
Finish
Alright, let's start your road of free creation, Yang Fan! set sail!
If it doesn't work, try again, give the bug a chance!
If adding tailwindcss fails, please see: https://www.w3cschool.cn/tailwind_css/tailwind_css-izj53p90.html
Although the road is long, the steps are firm and do not forget the original intention.
We will go through both wind and rain, not afraid of hardships and struggles.
The seeds of success are buried in the burning heart,
hard work, and gorgeous flowers bloom.