Next.js Discord

Discord Forum

Default and custom(which i made custom class with using tailwind @apply) classNames don't work

Answered
Satin posted this in #help-forum
Open in Discord
SatinOP
Hello guys, i am using newest next.js version with app directory. The problem is some of classNames don't work even if i see them on the dom. How can i fix that?

this is my tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/components/**/*.{js,ts,jsx,tsx,mdx}', './src/app/**/*.{js,ts,jsx,tsx,mdx}'],
  theme: {
    fontFamily: {
      sans: ['Nunito Sans', 'sans-serif'],
    },
    extend: {
      colors: {
        fdpink: {
          400: '#f30752',
          500: '#e6034b',
          600: '#d40345',
        },
        fdpurple: {
          50: '#f9f5fe',
          100: '#f3ebfd',
          200: '#e0cdfa',
          300: '#cdaff7',
          400: '#a874f2',
          500: '#8338ec',
          600: '#7632d4',
          700: '#622ab1',
          800: '#4f228e',
          900: '#401b74',
        },
      },
      fontSize: {
        '4xl': ['2.25rem', '2.75rem'],
        '5xl': ['3rem', '3.5rem'],
        '6xl': ['4rem', '4.5rem'],
      },
      spacing: {
        18: '4.5rem',
        30: '7.5rem',
      },
      animation: {
        text: 'text 5s ease infinite',
      },
      keyframes: {
        text: {
          '0%, 100%': {
            'background-size': '200% 200%',
            'background-position': 'left center',
          },
          '50%': {
            'background-size': '200% 200%',
            'background-position': 'right center',
          },
        },
      },
    },
  },
  plugins: [require('@tailwindcss/forms')],
};
Answered by Satin
tailwind does not support that
View full answer

24 Replies

where you used the tailwind classnames
SatinOP
I am using tailwind classnames on my custom anchorButton component in the home page.

This is how i call the AnchorButton component on src/app/page.tsx

import AnchorButton from '@/components/button/anchorButton';

export default function Home() {
  return (
    <section className="m-5 flex flex-col flex-wrap items-center justify-center gap-4">
      <div className="center flex-col gap-4 border-b-2 p-5">
        <AnchorButton className="test test2 test3" variant="primary" href="#">
          BaseButton Primary
        </AnchorButton>
        <AnchorButton variant="primary" disabled href="#">
          BaseButton Primary Disabled
        </AnchorButton>
        <AnchorButton variant="secondary" href="#">
          BaseButton Secondary
        </AnchorButton>
        <AnchorButton variant="secondary" disabled href="#">
          BaseButton Secondary Disabled
        </AnchorButton>
        <AnchorButton variant="link" href="#">
          BaseButton Link
        </AnchorButton>
        <AnchorButton variant="link" disabled href="#">
          BaseButton Link Disabled
        </AnchorButton>

        <AnchorButton variant="primary-circular" href="#" />
        <AnchorButton variant="primary-circular" disabled href="#" />
        <AnchorButton variant="secondary-circular" href="#" />
        <AnchorButton variant="secondary-circular" disabled href="#" />

      </section>
  );
}
and this is AnchorButton.tsx in path src/components/button/anchorButton.tsx

import React from 'react';
import Link, { LinkProps } from 'next/link';
import clsx from 'clsx';
import { HiOutlinePlusCircle, HiPlusCircle } from 'react-icons/hi';
import { TbArrowNarrowRight } from 'react-icons/tb';

type Variant = 'primary' | 'secondary' | 'link' | 'primary-circular' | 'secondary-circular';

type Size = 'lg' | 'xl';

interface Props extends LinkProps {
  children?: React.ReactNode;
  variant?: Variant;
  size?: Size;
  disabled?: boolean;
  className?: string;
}

const AnchorButton: React.FC<Props> = ({
  children,
  variant = 'primary',
  size,
  disabled,
  className,
  ...rest
}) => {
  const isCircular = variant === 'primary-circular' || variant === 'secondary-circular';
  const isLink = variant === 'link';

  const buttonClasses = clsx(
    !isCircular && !isLink && 'btn',
    variant && `btn-${variant}`,
    !isCircular && size,
    {
      [`h-${size === 'xl' ? 12 : size === 'lg' ? 10 : 9} w-${
        size === 'xl' ? 12 : size === 'lg' ? 10 : 9
      }`]: isCircular,
      'gap-x-1 transition-all duration-300 hover:gap-x-2': isLink,
      disabled,
    },
    className
  );

  return (
    <Link className={buttonClasses} {...rest}>
      {isCircular && (
        <>
          {variant === 'primary-circular' && <HiPlusCircle className="h-full w-full" />}
          {variant === 'secondary-circular' && <HiOutlinePlusCircle className="h-full w-full" />}
        </>
      )}
      {children}
      {isLink && <TbArrowNarrowRight />}
    </Link>
  );
};

export default AnchorButton;
and my custom classnames are in the globals.css which i import on the layout.tsx
@layer components {
  .btn {
    @apply text-sm px-4 py-2 font-semibold rounded-lg shadow-sm text-center;
  }

... my custom classnames are in here
i can see the btn-primary styling on the devtool but interestingly even i see the btn-secondary on the dom as className, i dont see the styling effects. When i check the styling folde on the devtools some of my custom classNames and some of default tailwind classnames like h-10 w-10 dont show up on the devtool neither. How can i fix that? @alfon
@ts-ignore
maybe try restarting the dev server
and deleting the .next folder
SatinOP
I tried to restart dev server but didnt worked
But i think my config and folder structure are okay
What u think guys
@Satin I tried to restart dev server but didnt worked
@ts-ignore
try removing the cache
also you sure you added the @tailwind directives in global.css and it is imported
SatinOP
any ideas?
is this about making const for classnames and passing with it the problem?
joulev
you need to show me a reproduction repository
looks like a mistake during the tailwind setup
SatinOP
i saw the problem
its about problem with constructing class names dynamically
SatinOP
tailwind does not support that
Answer
joulev
yeah time to fix it
glad you found the issue