rocketclimb / rocketicons

React and React Native icons powered by Tailwind
https://rocketicons.io
MIT License
65 stars 0 forks source link

Classes are prefixed twice - tailwind config prefix #145

Open kkoudelka opened 2 months ago

kkoudelka commented 2 months ago

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.

programad commented 3 days ago

We just published version 0.2.8 which fixes this.