Tailwind CSS 4.0版本的使用

在vue3+vite的项目中使用Tailwind CSS 4.0，下载最新的Tailwind CSS4.0版本使用过程较之前的版本方便了很多。

1.安装Tailwind CSS

npm install tailwindcss @tailwindcss/vite

2.vite.config.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
//插件中配置
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
    tailwindcss(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

3.对应的组件中导入@import "tailwindcss" 

<script setup>
import { RouterLink, RouterView } from 'vue-router'

</script>

<template>
  <RouterView />
</template>

<style scoped>
@import "tailwindcss"
</style>

4.在组件中使用Tailwind CSS

home.vue

<template>
  <div class="flex flex-row space-x-4 font-mono text-sm leading-6 font-bold text-white p-4">
    <div class="flex h-14 basis-64 items-center justify-center rounded-lg bg-purple-500">01</div>
    <div class="flex h-14 basis-64 items-center justify-center rounded-lg bg-purple-500">02</div>
    <div class="flex h-14 basis-128 items-center justify-center rounded-lg bg-purple-500">03</div>
  </div>

</template>
<style>
@import "tailwindcss";
</style>

5.效果

在使用的时候要根据不同的版本 引入的方式有所不同，具体可以参照官方网站Installing Tailwind CSS with Vite - Tailwind CSS