无法使用 tailwind 和 next.js 打字稿正确调整我的图标大小

Question

我一直在为这个问题烦恼。我正在尝试使用 next.js 学习 tailwindcss 的 yt 教程。这个想法是使用 heroicon 库来制作一个带有图标的酷 header。问题是我使用的图标太大了，我不知道如何修复它。

这是我的代码。

tsconfing.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "preserveSymlinks": true,
    "experimentalDecorators": true,
    "noImplicitAny": true,
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Header.tsx

import {TerminalIcon} from '@heroicons/react/outline'

const Header = () => {
    return (
        <header className='border-b border-gray-100'>
            <div className='container mx-auto px-4 sm:px-6 py-4'>
                {/* logo */}
                <p className='flex items-center space-x-1 text-blue-600'>
                    <TerminalIcon className='w-8 h-8 flex-shrink-0' />
                    <span className='font-bold text-lg tracking-tight whitespace-nowrap'>
                        Blog for dev
                    </span>
                </p>
            </div>
        </header>
    );
};

export default Header;

Footer.tsx

const Footer = () => (
    <footer className="px-4 sm:px-6 py-6 mt-24">
        <p className="text-center text-sm text-gray-500">
            2020 Better Dev. All rights reserved.
        </p>
    </footer>
);

    
export default Footer;

Layout.tsx

import Header from './Header';
import Footer from './Footer';
import React, {FC} from 'react';

interface Props {

}

const Layout: FC<Props> = ({ children, ...props }) => {
    return (
        <div className='min-h-screen flex flex-col'>
            <Header />
            <main className='flex-grow container mx-auto px-4 sm:px-6'{...props}>
                {children}
            </main>
            <Footer />
        </div>
    );
};

export default Layout;

index.tsx

import type { NextPage } from 'next'
import Head from 'next/head'
import Layout from '../sections/Layout'

const Home: NextPage = () => {
  return (
    <>
      <Head>
        <title>Home</title>
        <link rel='icon' href='/favicon.ico' />
      </Head>
      <Layout>
        {/* hero section */}
        <section className='flex flex-col justify-center items-center space-y-10 mt-12 sm:mt-24 md:mt-32'>
          {/* HeadLines */}
          <div className='space-y-4 max-w-4xl mx-auto text-center'>
            <h1 className='text-4xl sm:text-7xl font-bold capitalize'>
              <span className='block'>The dev platform</span>
              <span className='block'> for developers</span>
            </h1>
            <h2 className='text-xl sm:text-2xl'>
              Star your dev platform and share your knowledge!
            </h2>
          </div>
          <button
            type='button'
            className='bg-blue-500 hover:bg-blue-700 text-white font-bold py-6 px-3 rounded-md border-2 border-blue-600 hover:border-blue-700 text-lg sm:text-xl focus:outline-none focus:ring-4 focus:ring-blue-600 focus:ring-opacity-50 whitespace-nowrap'
          >
            Get started
          </button>
        </section>
      </Layout>
    </>
  )
}

export default Home

global.css

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

@layer base {
  body {
    @apply bg-gray-50 text-gray-900;
    @apply min-h-screen;
  }
  ::selection {
    @apply text-white bg-blue-600;
  }
}

Here is the output that I have

here is the output that I want to have

我不知道自己在做什么，我已经逐行按照教程进行操作。唯一不同的是我的 next.js 项目使用的是打字稿。据说 <TerminalIcon className='w-8 h-8 flex-shrink-0'> 的属性是为了解决这个问题，但它不起作用，文本的颜色也不起作用，我不知道为什么。任何帮助将不胜感激-

如果你想试一试，这里是回购的 link。

https://github.com/jabandersnatch/landing_page

如果你想自己查看问题，我在 vercel 中部署了 repo，这里是 link。 https://landing-page-three-pink.vercel.app/

最后是我正在学习的教程。

https://www.youtube.com/watch?v=ijs2ORbwqok&t=117s

Pd：对不起，如果我没有很好地解释我的问题是我第一次在堆栈中发帖

Answer 1

更新，我终于修好了。我是愚蠢的。原来问题出在我的 tailwindcss.config.js 文件上！我的项目结构与教程中的不同。

├────页数

│ └────api

├────public

├───src

│ ├───组件

│ │ ├───页脚

│ │ ├────header

│ │ ├───布局

│ │ └────导航

│ └────redux

└────样式

意识到我注意到我的 module.exports 将永远无法工作，因为我的组件位于 ````src/components``` 上。我只是添加了正确的文件，它现在可以正常工作了！

非常感谢您的帮助！

无法使用 tailwind 和 next.js 打字稿正确调整我的图标大小

Can not properly size my icon with tailwind and next.js typescript

javascript

typescript

next.js

tailwind-css