CODEWITHSUNDEEP
javascripttypescriptnext.jstailwind-css
Juan Andres Mendez
Juan Andres Mendez

Reputation: 41

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

I have been pulling my hair out with this issue. I was trying to follow a yt tutorial of tailwindcss with next.js. The idea was to use the heroicon library for making a cool header with an icon. The problem is that the icon that I'm using is way bigger that it should and i don't know how to fix it.

Here is my code.

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

I don't know what I'm doing worng, I've follow the tutorial line by line. The only thing that is different is that my next.js project is with typescript. Supposedly the atribute at <TerminalIcon className='w-8 h-8 flex-shrink-0'> was meant to fix this but it does not work, also the color of the text is not working and I don't know why. Any help will be most appreciated-

If you want to give it a give a whack at it here is the link of the repo.

https://github.com/jabandersnatch/landing_page

I f you want to see the issue by yourself I deployed the repo in vercel, here is the link. https://landing-page-three-pink.vercel.app/

And finally here is the tutorial that I was following.

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

Pd: Sorry if I didn't do a good job explaining my issue is my first time posting in stack

Upvotes: 1

Views: 2426

Answers (2)

Juan Andres Mendez
Juan Andres Mendez

Reputation: 41

Update, I finally fix it. Turns out that the issue was on my tailwindcss.config.js file! My project structure was different than the one in the tutorial.

├───pages
│   └───api
├───public
├───src
│   ├───components
│   │   ├───footer
│   │   ├───header
│   │   ├───layout
│   │   └───Navigation
│   └───redux
└───styles

After realizing that, I notice that my module.exports will never work because my components where on src/components. I simply added the correct file and it's now working flawlessly!

Upvotes: 1

Saeed Bello
Saeed Bello

Reputation: 11

You don't need to be passing around your tailwind.config.js file in your components folder.

A quick way to fix it is to update the tailwind.config.js> content key value to include your file extentions. Example here given here-under:

tailwind.config.js file contents

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

If you observe, I have included the following file types: html,js,jsx,ts,tsx. You may include other file type that needs the tailwind configuration.

Upvotes: 1

Related Questions