Skip to content

Styling an existing component doesn't seem to work in twin.macro/react-twc #248

@pksunkara

Description

@pksunkara

What version of prettier-plugin-tailwindcss are you using?

For example: v0.5.3

What version of Tailwind CSS are you using?

For example: v3.4.1

What version of Node.js are you using?

For example: v18.0.0

What package manager are you using?

For example: pnpm

What operating system are you using?

For example: Linux

Reproduction URL

.prettierrc.js

module.exports = {
  plugins: [require('prettier-plugin-tailwindcss')],
  tailwindFunctions: ['tw']
};

Example.tsx

const Btn1 = tw(Button)`border p-1 bg-pink-100`;

const Btn2 = tw(Button).attrs({
  size: 'small',
})`border p-1 bg-pink-100`;

const Btn3 = tw(Button)<React.ComponentProps<typeof Button>>`border p-1 bg-pink-100`;

Describe your issue

Both twin.macro and react-twc allows styling an existing component using the above syntax.

Prettier plugin is not sorting the classes in those syntax usages.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions