vite tailwind - Shell-Bash (1)

📌 相关文章

📜 vite tailwind - Shell-Bash (1)

📅 最后修改于: 2023-12-03 15:05:51.060000 🧑 作者: Mango

Vite + Tailwind

Vite is a build tool for modern web development, providing fast and efficient building and development experiences. Tailwind CSS is a popular utility-first CSS framework that allows you to quickly design responsive and custom user interfaces.

With Vite and Tailwind, you can quickly and easily create modern and responsive web applications.

Getting Started

To get started with Vite and Tailwind, you'll need to have Node.js installed first.

Create a new project

Create a new directory for your project and navigate to it:

mkdir my-vite-tailwind-project
cd my-vite-tailwind-project

Then, initialize a new Node.js project:

npm init -y

Install dependencies

Install vite and tailwindcss as development dependencies:

npm install -D vite tailwindcss

Create a basic HTML file

Create a basic HTML file (index.html) in the root of your project and include a reference to a main.js file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vite + Tailwind</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./dist/main.js"></script>
  </body>
</html>

Create a `main.js` file

Create a main.js file in a new src directory:

mkdir src
touch src/main.js

Add some sample code to main.js:

console.log("Hello, world!");

Configure Vite

Create a new file named vite.config.js in the root of your project and add the following code:

import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'

export default defineConfig({
  plugins: [createVuePlugin(/*options*/)],
})

Configure Tailwind

Create a new file named tailwind.config.js in the root of your project and add the following code:

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

This configuration tells Tailwind which files to purge (in order to reduce the size of the final CSS file), as well as any custom theme extensions you may want to add.

Add Tailwind to your CSS

Create a new CSS file named styles.css in a new src directory:

mkdir src/css
touch src/css/styles.css

Add the following code to styles.css:

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

This code tells Tailwind to include the base styles, components, and utilities, which can then be customized based on your needs.

Update `main.js` to import `styles.css`

Update main.js to import styles.css:

import './css/styles.css'

console.log("Hello, world!");

Start the development server

Start the development server by running npm run dev:

npm run dev

This will start the development server and launch a browser window with your basic project.

Build for production

When you're ready to build your project for production, run npm run build:

npm run build

This will create an optimized build of your project in the dist directory.

Conclusion

That's all you need to get started with Vite and Tailwind! With these powerful tools in your toolkit, you can quickly and easily create modern and responsive web applications.