I've hit a roadblock with an issue that's been driving me crazy. I attempted to follow a tutorial on tailwindcss with next.js from YouTube. The goal was to utilize the heroicon library to create a stylish header with an icon. However, the icon I'm using appears much larger than it should be and I'm struggling to find a solution.
Below is my code:
tsconfig.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;
}
}
Desired output can be viewed here
I seem to have gone wrong somewhere, despite meticulously following the tutorial step-by-step. The only difference is that my next.js project uses TypeScript. The attribute in
<TerminalIcon className='w-8 h-8 flex-shrink-0'>If you'd like to troubleshoot, here's the link to the repository:
https://github.com/jabandersnatch/landing_page
To see the issue firsthand, the repository has been deployed on Vercel at this link:
Lastly, here's the tutorial I was following:
https://www.youtube.com/watch?v=ijs2ORbwqok&t=117s
P.S: Apologies if my explanation of the issue isn't clear enough. This is my first time posting on Stack Overflow.