how do I config prettier to format correct mutiple lines?

[hunght]

Look at this code:

const StyledInput = styled.input<InputProps>(({ barcodeActive, statusClass }) => [
    css`
        border: ${barcodeActive ? '1px solid white' : '1px solid #446e94'};
        border-radius: 10px;
    `,
    tw`px-3 py-3 w-1/2 text-center mx-auto placeholder-statusSection text-white relative
    bg-${statusClass} rounded text-sm border-1 border-statusSection outline-none focus:outline-none top-2`,
]);

my prettier can work fine in the css tag, but for tw tag, it fail to format the lines

[ben-rogerson]

Could you let me know what you mean by "fail to format the lines"?

Also, bg-${statusClass} is a dynamic class and won't work as you'll need to specify full classes.

[hunght]

hi @ben-rogerson, thank you for the answer, I mean with text inside the tw , it will not be formated by prettier but the text inside the css does

[ben-rogerson]

You can use one of these two vscode plugins to order your class sets:

• lightyen.tailwindcss-intellisense-twin
• bradlc.vscode-tailwindcss