nuxtjs3 使用tailwindcss做自适应

步骤 1: 安装 Tailwind CSS

npm install tailwindcss postcss autoprefixer @nuxtjs/tailwindcss

步骤 2: 配置 Tailwind CSS
这将生成一个 tailwind.config.js 文件。

npx tailwindcss init

步骤 3: 配置 nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    
    
  compatibilityDate: '2024-04-03',
  devtools: {
    
     enabled: true },
    // 配置网站头部信息，包括 logo 和 favicon
  app: {
    
    
    head: {
    
    
      link: [
        {
    
     rel: "icon", type: "image/x-icon", href: "/logo.ico" }
      ],
    }
  },
  devServer: {
    
    
    host: '0.0.0.0',
    port: 3000
  },
  css: [
     '~/assets/css/tailwind.css',
    '~/assets/css/style.css'
  ],
  site: {
    
     //https://nuxtseo.com/
    url: 'http://localhost:3000',
    name: 'name',
   
    description: '科技、创新、服务、物联网、iot、智能物联平台', // The description of your site, used in the meta tags.
  },
  // Vite 配置
  vite: {
    
    
    css: {
    
    
      postcss: {
    
    
        plugins: [
          require('tailwindcss'),
          require('autoprefixer'),
        ],
      },
    },
  },

  modules: ['@nuxtjs/seo','@nuxtjs/tailwindcss']
})

步骤 4: 创建 Tailwind CSS 文件
在 assets/css 目录下创建 tailwind.css 文件，并添加 Tailwind 的基础指令：

/* assets/css/tailwind.css */

/* Import Tailwind's base styles */
@import 'tailwindcss/base';

/* Import Tailwind's component styles */
@import 'tailwindcss/components';

/* Import Tailwind's utility styles */
@import 'tailwindcss/utilities';

/* Add any custom global styles here */

步骤 5: 配置 Tailwind CSS
在 tailwind.config.js 文件中，你可以配置 Tailwind 的响应式断点和自定义主题。例如：

// tailwind.config.js
module.exports = {
    
    
  content: [
    "./pages/**/*.{vue,js,ts,jsx,tsx}",
    "./components/**/*.{vue,js,ts,jsx,tsx}",
    "./layouts/**/*.{vue,js,ts,jsx,tsx}",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
  ],
  theme: {
    
    
    extend: {
    
    
      colors: {
    
    
        primary: '#3490dc',
        secondary: '#ffed4a',
      },
      fontFamily: {
    
    
        sans: ['Helvetica', 'Arial', 'sans-serif'],
      },
      // Add custom breakpoints if needed
      screens: {
    
    
        'sm': '640px',
        'md': '768px',
        'lg': '1024px',
        'xl': '1280px',
        '2xl': '1536px',
      },
    },
  },
  plugins: [],
}

步骤 6: 使用 Tailwind CSS 类

<template>
  <div class="container mx-auto p-4">
    <header class="bg-primary text-white p-4 text-center">
      <h1 class="text-2xl md:text-4xl">Welcome to My Website</h1>
    </header>
    <main class="my-8">
      <section class="bg-gray-100 p-4 rounded-lg shadow-md">
        <h2 class="text-xl">Responsive Section</h2>
        <p class="text-base md:text-lg">
          This is a responsive section that adjusts based on screen size.
        </p>
      </section>
    </main>
    <footer class="bg-secondary text-center p-4">
      <p class="text-sm">Footer content goes here</p>
    </footer>
  </div>
</template>

<script setup>
// Your script logic here
</script>

<style scoped>
/* Add any scoped styles here */
</style>