NextJS Tailwind：任何颜色都不能在我的导航栏上工作

mlmc2os5  于 11个月前  发布在  其他
关注(0)|答案(1)|浏览(59)

我有这个导航栏和任何的颜色在这里没有显示：
代码：

'use client'
import Head from 'next/head';
import Link from 'next/link';
import { useState } from 'react';

export default function Home() {
  const [navbar, setNavbar] = useState(false);
  return (
    <div>
      <Head>
        <title>Create Next Responsive Navbar With Tailwind CSS</title>
        <meta
          name="description"
          content="Create Next JS Responsive Menu with Tailwind CSS"
        />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <nav className="w-full bg-gray-800 shadow">
        <div className="justify-between px-4 mx-auto lg:max-w-7xl md:items-center md:flex md:px-8">
          <div>
            <div className="flex items-center justify-between py-3 md:py-5 md:block">
              <a href="#">
                <h2 className="text-2xl text-white font-bold">NEXT JS</h2>
              </a>
              <div className="md:hidden">
                <button
                  className="p-2 text-gray-700 rounded-md outline-none focus:border-gray-400 focus:border"
                  onClick={() => setNavbar(!navbar)}
                >
                  {navbar ? (
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      className="w-6 h-6 text-white"
                      viewBox="0 0 20 20"
                      fill="currentColor"
                    >
                      <path
                        fillRule="evenodd"
                        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                        clipRule="evenodd"
                      />
                    </svg>
                  ) : (
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      className="w-6 h-6 text-white"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                      strokeWidth={2}
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        d="M4 6h16M4 12h16M4 18h16"
                      />
                    </svg>
                  )}
                </button>
              </div>
            </div>
          </div>
          <div>
            <div
              className={`flex-1 justify-self-center pb-3 mt-8 md:block md:pb-0 md:mt-0 ${
                navbar ? 'block' : 'hidden'
              }`}
            >
              <ul className="items-center justify-center space-y-8 md:flex md:space-x-6 md:space-y-0">
                <li className="text-white">
                  <Link href="/">
                    {/* <a>Home</a> */} Sample 1
                  </Link>
                </li>
                <li className="text-white">
                  <Link href="/blogs">
                    {/* <a>Blogs</a> */}Sample 2
                  </Link>
                </li>
                <li className="text-white">
                  <Link href="/about">
                    {/* <a>About US</a> */} Sample 3
                  </Link>
                </li>
                <li className="text-white">
                  <Link href="/contact">
                    {/* <a>Contact US</a> */}Sample 4
                <button
                  type="button"
                  className="relative rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
                //   style={{backgroundColor: "#FFF"}}
                >
                  Sample Button
                </button>
                  </Link>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </nav>
      <div className="flex justify-center items-center mt-8">
        <h1 className="text-2xl font-bold text-purple-500">
          Create Responsive Navbar Menu in Next js with Tailwind CSS
        </h1>
      </div>
    </div>
  );
}

字符串

导航栏的输出

x1c 0d1x的数据
我也尝试过在导航栏上定义按钮，但是效果不太好。<button type=“button”style={{backgroundColor：“#FFF”}} >示例按钮

globals.css如果我在globals.css上为标题和段落执行此操作，就可以了

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

h1{
    color: red;
} 

p{
    color: indianred
}

型
此globals.css正在/app/layout.tsx上导入：

import { NavBar } from '@/components';
import './globals.css';
import {Inter} from 'next/font/google';

import AuthProvider from "@/components/Auth/Authprovider";
import { createServerComponentClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"

export const inter = Inter({ subsets: ['latin'] });

export const metadata = {
  title: 'Water Refilling Station',
  description: 'Generated by Next.js',
}

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {

  const supabase = createServerComponentClient({cookies});

  const {
    data: { session },
  } = await supabase.auth.getSession();

  const accessToken = session?.access_token || null;
  return (
    <html lang="en">
      <body className={`${inter.className} antialiased`}>
      <NavBar session={session}/>
      <AuthProvider accessToken={accessToken}>{children}</AuthProvider>
      </body>
    </html>
  )
}

型
"我的包裹，杰森"

{
  "name": "NextJs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@headlessui/react": "^1.7.17",
    "@heroicons/react": "^2.0.18",
    "@supabase/auth-helpers-nextjs": "^0.8.1",
    "@supabase/supabase-js": "^2.38.0",
    "next": "^14.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10",
    "eslint": "^8",
    "eslint-config-next": "^14.0.0",
    "postcss": "^8",
    "tailwindcss": "^3",
    "typescript": "^5"
  }
}

型

顺风配置ts

import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    }, 
    colors: {
      'blue': '#1fb6ff',     // Represents clean water
      'green': '#13ce66',    // Represents freshness and nature
      'gray-dark': '#273444', // Neutral color for balance
      'gray': '#8492a6',      // Lighter gray for a clean look
      'gray-light': '#d3dce6', // Very light gray for a sense of purity
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },      borderRadius: {
        '4xl': '2rem',
      },
    }
  },
  plugins: [],
}
export default config

型

tsconfig.json文件系统

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

型

发布css.配置.js

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

型

next.js

1条答案

按热度按时间
vdgimpew

vdgimpew1#

bg-gray-800不会是Tailwind根据您的配置生成CSS规则的类。这是因为gray-800或gray.800不是颜色值。这是因为您在theme.colors中定义了颜色。这意味着您的颜色值将完全覆盖bg-<color>实用程序派生的colors的任何Tailwind默认值。
您可能打算在theme.extend.colors中定义颜色，因此将添加到颜色列表中，而不是覆盖它们：

const config: Config = {
    // …
    extend: {
      // …
      colors: {
        // To prevent override of the `blue.*` default colors, consider using a different
        // key to `blue`
        'blue-foo': '#1fb6ff',     // Represents clean water
        // To prevent override of the `green.*` default colors, consider using a different
        // key to `green`
        'green-foo': '#13ce66',    // Represents freshness and nature
        'gray-dark': '#273444', // Neutral color for balance
        // To prevent override of the `gray.*` default colors, consider using a different
        // key to `gray`
        'gray-foo': '#8492a6',      // Lighter gray for a clean look
        'gray-light': '#d3dce6', // Very light gray for a sense of purity
      },
    }
  },
  // …
}
export default config

字符串

赞(0）分享  回复(0）举报  11个月前
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com