rocketicons icon indicating copy to clipboard operation
rocketicons copied to clipboard

Classes are prefixed twice - tailwind config prefix

Open kkoudelka opened this issue 7 months ago • 2 comments

The icons work fine without a prefix, however once I want to use custom prefix, Rocketicons stop working.

// tailwind.config.js
const icons = require("rocketicons/tailwind");

/** @type {import('tailwindcss').Config} */
export default {
  // content: ["./**/*.{js,jsx,ts,tsx}", "./*.{js,jsx,ts,tsx}"],
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  darkMode: ["class", '[data-mode="dark"]'],
  prefix: "a-",
  theme: {
    extend: {},
  },
  plugins: [icons.iconPlugin], // plugins: [icons] doesn't work in Storybook; idk why
};

Background and text colours work: image

Rocketicons intellisense: image

Using a-a-icon-current starts throwing errors like this and the project won't compile:

(2:1) E:\Projects\storybooktest\src\tailwind.css The `p-0` class does not exist. If `p-0` is a custom class, make sure it is defined within a `@layer` directive.

  1 | @tailwind base;
> 2 | @tailwind components;
    | ^
  3 | @tailwind utilities;
  4 | @tailwind variants;

The project compiles just fine using a-icon-current, however no Rocketicons classes are bundled in tailwind.css.

kkoudelka avatar Jul 16 '24 14:07 kkoudelka