Support Tailwind CSS

[nvh95]

Is your feature request related to a problem? Please describe.
Tailwind CSS is an excellent library to write utility CSS

Describe the solution you'd like
Jest Preview should support Tailwind CSS out of the box. We should also provide an example as well.

Describe how should jest-preview implements this feature
Not sure. As I know, Tailwind CSS is usually configured through a PostCSS plugin. Let's follow that route.

Additional context
I'm not sure Jest Preview supports Tailwind CSS yet or not. 😂

[nvh95]

Documentation on how to install TailwindCSS: https://tailwindcss.com/docs/installation

How tailwindcss work? Mainly 2 ways:

• Build an output CSS file (using Tailwind CLI) => Can use jestPreviewConfigure externalCss
• import css file Using PostCSS => Not sure how to do. But I know that we have to handle

@tailwind base;
@tailwind components;
@tailwind utilities;

I don't know what kind of @tailwind syntax is (directive?), but we might have to handle it via Code transformation, or/and TailwindCSS CLi

[sundaycrafts]

@nvh95 Hi, here is my random implementation.

sundaycrafts@e77ded7

Currently, this only support documented installation process for Tailwind CSS. It means it doesn't look up postcss.config.js. But it doesn’t be needed for Tailwind CSS itself.

I think this implementation is enough for the first step to support Tailwind CSS. What do you think?

[nvh95]

@sundaycrafts Thank you very much for your interest to Jest Preview and your efforts to make it work with TailwindCSS. I will take a look at your experiment as soon as I have free time.

In the mean time, can you open a PR, even when it's not been done yet? Please open as a draft PR, so I can easier review your code, and you can officially claim this issue, avoid others also plan to work on this.

Thanks.

[nvh95]

Close for now since it is included in #133
@nvh95 to check if classes with : work fine (e.g: :hover)