Vue3 & Vite 中如何使用 Tailwind CSS 之 Laravel9前后端分离演示案例（一）

hi，我是温馨，一名PHPer

目标：本篇文章将结合 Laravel9，passport，Vue3，Vite，Tailwind CSS 做一个前后后分离的演示案例。本篇文章属于前置篇，为后续的两篇文章做一个准备。

第一步：安装vue3

# 1、初始化并指定模板
npm init vite@latest vue3demo_1 -- --template vue

# 安装依赖
cd vue3demo_1
npm install
npm run dev

第二步：安装 Tailwind CSS

安装 Tailwind CSS

# 安装 Twailwind CSS
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

创建配置文件

# 创建配置文件
npx tailwindcss init -p

该命令执行完成后，会在项目根目录生成 tailwind.config.cjs 和 postcss.config.cjs 两个配置文件，内容如下：

// tailwind.config.cjs
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

// postcss.config.cjs

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

安装并配置完成后，后续运行 run run dev，tailwind css 后自动编译，即完成即可使用。

第三步：修改tailwind.config.cjs配置文件

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

第四步：项目中导入 Tailwind CSS

创建 Tailwind CSS 样式文件

文件位置：vue3demo_1/src/index.css

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

src/main.js 中引入 tailwind.css

// src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

第五步：创建一个使用 Tailwind CSS 的组件

位置：src/components/Demo.vue

<template>
  <div class="relative bg-white overflow-hidden">
    <div class="max-w-7xl mx-auto">
      <div class="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
        <main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
          <div class="sm:text-center lg:text-left">
            <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
              <span class="block text-indigo-600 xl:inline">Laravel9 & Vue3 & Vite</span>
            </h1>
            <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
              Larave9 & Vue3 Api demo 演示
            </p>
          </div>
        </main>
      </div>
    </div>
  </div>
</template>

<script setup></script>

<style scoped></style>

第六步：run 一下，快来体验吧

npm run dev