hymhub/css-to-tailwind

Convert CSS code to Tailwindcss syntax in real time

👋 Hello World! I am hyminghan.

css-to-tailwind's Issues

`height` not using default values

Love this repo, incredible job with it! I think it has a ton of potential.

If you're accepting community contributions, I could open a PR to fix this myself. Lmk what you think!

Issue

height doesn't use default values in the same way width does.

Reproduction

Taken from the online demo

Input:

* {
    width: 2rem;
    height: 2rem;
}

Output:

w-8
h-[2rem]

Possible Cause

The height configuration has no reference to default values:

val => (isUnit(val) ? `h-${getUnitMetacharactersVal(val, [CustomSelect.vw]) || `[${val}]`}` : '')

On the other hand, the width configuration does:

val => (isUnit(val) ? `w-${(useAllDefaultValues && getRemDefaultVal(val)) || getUnitMetacharactersVal(val, [CustomSelect.vh]) || `[${val}]`}` : '')

Thus, I believe we can fix this issue by using the useAllDefaultValues function in the height configuration as well.

use default values

Could you convert the default values like 0.5rem/8px to 2 for padding for example.

So if you put in:
padding: 0.5rem;

it converts to:
p-2

Same for the margin attribute. Like you did for the width attributes.

font-size doesn't use default value

font-size:3rem

output:
text-[3rem]

expected:
text-5xl

css attributes using `css-variables` fails to convert

Hey, that's a nice handy tool. Thanks for the library. Looks the css attributes using css-variables fails to transform. Is it planned, or in progress. Would like to help on this too if tailwind actually supports this. 😄

Inconsistencies found when converting Tailwind-based CSS

Hello @hymhub!

First of all, thank you for building this package! I've been going through some experiments with it and found out the dark modifier isn't detected, is that expected behavior?

Typography configuration

How can I configure the config to output? text-base, font-semibold, leading-6

Support output with prefix

Hey this is a handy tool, thank you for building it! Curious if there's a way (or you already have plans to support this) to specify the output should use a given prefix. It's common in large projects that are migrating to Tailwind to use a prefix in the Tailwind config file in order to avoid style conflicts, so I could see it being very useful to have an option to configure this.

box-shadow wrong convertion

If you type a box-shadow in CSS. For example:
box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

It turns into:
[box-shadow:inset_0_2px_4px_0_rgb(0_0_0_/_0.05)]

It should be:
shadow-inner