how to use generated custom classes?

[JeffBeltran]

Hey there, sorry if this is a silly question, what is the best way to use the generated classnames? i know im missing something but im pretty new to TS and im not even sure where to look

[muhammadsammy]

Hello, @JeffBeltran!

If you used the CLI you should import the generated file (and NOT the actual library) into your code in order to get the customized classnames, like this:

DO:

import { classnames } from "relative/path/to/generated/tailwindcss-classnames";

DO NOT

import { classnames } from "tailwindcss-classnames";

as you won't get the custom/generated classnames from your config, instead you will have only the default tailwindcss classes.

---

and then use the classnames as normal:

import { classnames } from "relative/path/to/generated/tailwindcss-classnames";

const styles = classnames(.....);

eg. if you generated the file in 'src/types/tailwindcss-classnames' and you want to use the generated file in 'src/index.ts', the code will be something like this:

// src/index.ts
import { classnames } from "./types/tailwindcss-classnames";

const styles = classnames(.....);

[JeffBeltran]

yeah i'll see about getting something up, just curious if it could be related to size and vscode choking on it? i ended up getting the tailwind vscode plugin to work with the auto complete so i'm good from my end. Thanks again!

[ChristopherML]

Hey @muhammadsammy, Thank you so much for the library, great work!

Could I suggest that a note addressing this issue, how to import so as to use the custom types, is added to the readme in the "Using the CLI" section? I think it would help with clarity for new users. Cheers. Thanks again!

[andykenward]

What about adding it to your projects tsconfig.json compilerOptions paths instead?

{
  "compilerOptions": {
    "paths": {
      "tailwindcss-classnames": ["__generated__/tailwindcss-classnames.ts"]
    }
  },
}

Which should allow you keep the import the same and use your generated version of tailwindcss-classnames instead of the node_modules one.

import { classnames } from "tailwindcss-classnames"

[jamesarosen]

This would be great to have in the README!

[muhammadsammy]

Added to the readme. Thank you all!