@youthfulhps/tailwind-converter
TypeScript icon, indicating that this package has built-in type declarations

0.8.1 • Public • Published

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

before

  • After

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.

Package Sidebar

Install

npm i @youthfulhps/tailwind-converter

Weekly Downloads

0

Version

0.8.1

License

none

Unpacked Size

212 kB

Total Files

43

Last publish

Collaborators

  • youthfulhps