tailwind-converter

Extracts the styles of a component defined through styled-components, converts it into a tailwind utility classes, and injects it into the className property of that element.

This is a converter library designed to automate parts of the work process for the productivity of developers working on the transition from styled-components to tailwindCSS.

I've tried to cover a variety of code-writing methods, but I admit it's not perfect. I recommend you to use it to the extent that you get help, and I promise to improve it steadily.

I hope it can be of little help.

Example

• Before

• After

Installation

This library provides a shell script. recommend a global installation for convenience.

~$ npm install -g @youthfulhps/tailwind-converter

~$ yarn add -g @youthfulhps/tailwind-converter

~$ pnpm add -g @youthfulhps/tailwind-converter

Usage

~$ tailwind-converter --target ${target file directory}

# example
~$ tailwind-converter --target ./src/components/Component.jsx

Limitation

Parameters passed to a tagged template literal function (styled) include interpolation for conditional style definitions. In this case, we're thinking about how to approach it, but because there's a lot of room for issues.

The current version replaces the interpolation contained in the style definition with the property 'unset' to convert it into a utility class, and also maintains the components defined by the function 'styled' to address the issue.