rocketicons
rocketicons copied to clipboard
Classes are prefixed twice - tailwind config prefix
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:
Rocketicons intellisense:
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
.