当前位置：首页 > news >正文

nuxtjs3 使用tailwindcss做自适应

news 2025/8/6 5:48:57

步骤 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 和 faviconapp: {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 neededscreens: {'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>