Use Tailwind to extract actual CSS rules (deletes the cheatsheet!)

[ADTC]

Demo: https://tailwind-to-css-three.vercel.app/

This uses an API route to instantly process the given Tailwind classes and return the actual CSS generated by Tailwind.

Advantages:

• No need of any cheatsheet. Completely removes the dependency on cheat sheets.
• Will work automatically for any class thrown at it, as long as Tailwind can interpret it.
  • No need to keep fixing a cheat sheet for missing random classes that should work!
• Will work correctly for all classes with arbitrary values inserted in square brackets.
  • This is something we have to keep updating the cheat sheet for as we discover new ones.
• Will give the exact CSS generated by Tailwind for the given set of class names.
• Fixes an insane amount of reported issues because we no longer need to fix the cheat sheet.
• The rules are wrapped by blocks with the .generated class name (including pseudo-stuff like .generated:hover) so you can easily replace it with your own class name.

Caveats:

Note: We could provide some UI options to do post-processing of the CSS to overcome the first two caveats. This will be a separate task outside the scope of this PR.

• Tailwind automatically adds variables for certain things like color and content. You'll have to manually fix them if needed.
• Tailwind uses rgb notation for colors instead of hex values. You'll have to manually change to hex if needed.
• ~Processing will fail if there are non-Tailwind classes in the input. We can fix this later in a separate PR.~ ✅ Fixed!
• There's a small delay of waiting for server response. This is normal and expected.

Issues:

Closes #14 (no longer relevant) Closes #30 (no longer relevant) Fixes #31 Fixes #32 Fixes #38 Fixes #39 Fixes #42 Fixes #43 Fixes #45 Fixes #46 Fixes #47

Previously closed issues which also benefit from this: Resolves #9 Resolves #16 Resolves #22

[ADTC]

Hi @PJijin I polished up the description a bit, with some added content.

What are your thoughts about this overhaul?

If this is accepted, we can further improve it by making this a full-fledged tool with more options. We can focus on improving the UI and adding features instead of fixing problems in a cheatsheet.

Thanks ~ fellow Keralite btw :)

[PJijin]

Hey,

Thanks for contributing @ADTC 🎉 Looks great to me! 👍

We can merge this pull request. By the way, have you been able to resolve this issue?

Processing will fail if there are non-Tailwind classes in the input. 

[ADTC]

@PJijin I was planning to tackle that later, but since you deemed it important enough to ask, I went ahead and tackled it in commit 3c2a362. It was easier to solve than I thought it would be.

I have also fixed a couple of additional minor issues. If all good, please go ahead to merge. (I suggest creating a merge commit as usual, so we can preserve history. Avoid squashing.)

[ADTC]

@PJijin Okay I'm done. My hands are off the keyboard! 😆

[ADTC]

Hi @PJijin is this okay to merge? 🙂

[ADTC]

👋

[ADTC]

Hey, just wondering if this is still good to merge, as it was last indicated:

Looks great to me! 👍

We can merge this pull request.

Thank you :)