No Badge class styles

[Seanmclem]

I've found that when I use a blog post component from https://kutty.netlify.app/components/blog-post/ That the styles for the badge don't come through. As if the class is not there. Is there something I'm missing? All the other styles seem to come through.

I'm running:

    "autoprefixer": "^10.2.5",
    "next": "10.0.4",
    "postcss": "^8.2.8",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "tailwindcss": "^2.0.3"

Next JS

Is it from tailwind UI? https://tailwindui.com/components/application-ui/elements/badges

[praveenjuge]

You need to add Kutty as a tailwind plugin for those badge styles. https://kutty.netlify.app/docs/

[Seanmclem]

@praveenjuge thanks, but after installing the plugin and adding it to the config -I'm still not seeing a difference.

[praveenjuge]

Hey, @Seanmclem sorry about that, can you share a minimal code example?

[Seanmclem]

@praveenjuge

the code I'm specifically struggling with is

          <div className="flex mb-6 space-x-2">
            <a className="text-gray-900 bg-gray-100 badge hover:bg-gray-200" href="#">CSS</a>
            <a className="text-gray-900 bg-gray-100 badge hover:bg-gray-200" href="#">Tailwind</a>
            <a className="text-gray-900 bg-gray-100 badge hover:bg-gray-200" href="#">AlpineJS</a>
          </div>

Do I really need to include <script src="https://cdn.jsdelivr.net/npm/kutty@latest/dist/kutty.min.js"></script> anywhere? If so, where in a react/nextjs project?

the whole component is below

const BlogDetail: React.FC<BlogProps> = ({ Title, Body, formattedPublishDate }) => {
  return (
      <article className="container px-4 py-24 mx-auto">
        <div className="w-full mx-auto mb-12 text-left md:w-3/4 lg:w-1/2">
          <h1 className="mb-3 text-3xl font-bold leading-tight text-gray-900 md:text-4xl"  title="Rise of Tailwind - A Utility First CSS Framework">
            {Title}
          </h1>

          <div className="flex mb-6 space-x-2">
            <a className="text-gray-900 bg-gray-100 badge hover:bg-gray-200" href="#">CSS</a>
            <a className="text-gray-900 bg-gray-100 badge hover:bg-gray-200" href="#">Tailwind</a>
            <a className="text-gray-900 bg-gray-100 badge hover:bg-gray-200" href="#">AlpineJS</a>
          </div>

          <a className="flex items-center text-gray-700" href="#">
            <div className="ml-2">
              <p className="text-sm font-semibold text-gray-800">Sean Clements</p>
              <p className="text-sm text-gray-500">
                {formattedPublishDate}
              </p>
            </div>
          </a>
        </div>

        <div 
          className="w-full mx-auto prose md:w-3/4 lg:w-1/2 space-y-5"
          dangerouslySetInnerHTML={{__html:Body}}
        />
      </article>
  );
};
export default BlogDetail

export async function getServerSideProps({ params }) {
  const blogResult = await fetchQuery({
    path: "blogs",
    queryParam: { key: "path", value: params.blogPath },
  });
  const blog: BlogProps = blogResult?.length === 1 && blogResult[0];

  return {
    props: {
      ...blog,
    },
  };
}

My Configs

// tailwind.config.js
module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [require("kutty")],
}

//postcss.config.js

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

// package.json
// ...

  "dependencies": {
    "autoprefixer": "^10.2.5",
    "kutty": "^0.5.0",
    "next": "10.0.4",
    "postcss": "^8.2.8",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "showdown": "^1.9.1",
    "tailwindcss": "^2.0.3"
  },
  "devDependencies": {
    "@types/node": "^14.14.33",
    "@types/react": "^17.0.3",
    "typescript": "^4.2.3"
  }

// _app.js

///import '../styles/globals.css'
import 'tailwindcss/dist/tailwind.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

[praveenjuge]

Hey @Seanmclem,

In _app.js, can you change

import 'tailwindcss/dist/tailwind.css'

to

import "tailwindcss/tailwind.css";

and see if that works?