added tailwindcss in the project

[nirban256]

Description

I added the tailwindcss configurations in the project so that it can be used through out the react play

Fixes #165 (issue)

Type of change

Please delete options that are not relevant.

• New feature (non-breaking change which adds functionality)

How Has This Been Tested?

I have tested it in the Linux Ubuntu Environment in chrome browser
Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce.

Checklist:

• I have performed a self-review of my own code
• My changes generate no new warnings
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

[vercel]

Someone is attempting to deploy a commit to a Personal Account owned by @atapas on Vercel.

@atapas first needs to authorize it.

[nirban256]

review the changes @atapas Sir

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
react-play	✅ Ready (Inspect)	Visit Preview	May 31, 2022 at 2:31AM (UTC)

[atapas]

Approving

[atapas]

@nirban256 I see some changes due to Tailwind overriding some selectors like H1, H2 etc.

What's the strategy to fix them?

Here is the preview link with all the changes from this branch?

https://react-play-git-fork-nirban256-main-atapas.vercel.app/

Here is reactplay from main: https://www.reactplay.io/

You can find the changes from home page to other pages.

[nirban256]

@atapas I think using class names instead of h1, h2 as selectors in the css will fix the issue

[vasantisuthar]

@nirban256 I see some changes due to Tailwind overriding some selectors like H1, H2 etc.

What's the strategy to fix them?

Here is the preview link with all the changes from this branch?

https://react-play-git-fork-nirban256-main-atapas.vercel.app/

Here is reactplay from main: https://www.reactplay.io/

You can find the changes from home page to other pages.

There are also changes to the alignment, and margin on the page.

[atapas]

@nirban256 I see some changes due to Tailwind overriding some selectors like H1, H2 etc.
What's the strategy to fix them?
Here is the preview link with all the changes from this branch?
https://react-play-git-fork-nirban256-main-atapas.vercel.app/
Here is reactplay from main: https://www.reactplay.io/
You can find the changes from home page to other pages.

There are also changes to the alignment, and margin on the page.

Yep, right. Please do a study to check how to take care of it gracefully. Take your time.

[nirban256]

ok @atapas I will try to find the solution

[atapas]

@nirmalkc We are planning to add Tailwind support to the project but facing issues with basic overriding. Could you please suggest any way out?

[nirmalkc]

@nirmalkc We are planning to add Tailwind support to the project but facing issues with basic overriding. Could you please suggest any way out?

I believe that most of the impacts are because of the tailwinds browser default reset styles.

Here are some impacts which I could observe in a quick glance..

• homepage title top margin
• idea title icon alignment
• filters modal has one of the major look-n-feel impact

I am sure that we can address this with a 1:1 comparison and fix it. I dont see any other workaround.

[atapas]

@nirmalkc We are planning to add Tailwind support to the project but facing issues with basic overriding. Could you please suggest any way out?

I believe that most of the impacts are because of the tailwinds browser default reset styles.

Here are some impacts which I could observe in a quick glance..

• homepage title top margin
• idea title icon alignment
• filters modal has one of the major look-n-feel impact

I am sure that we can address this with a 1:1 comparison and fix it. I dont see any other workaround.

@nirmalkc As you know the style part better, would you like to take it up? You can work on the same changes don so far on this branch.

Here are steps on how to fetch changes from someone's fork and work:https://dev.to/davidmaceachern/how-do-you-work-with-someone-else-s-fork-5fd7

Please let me know if you need help.

[atapas]

Hello @nirban256

We will be moving the react-play project from the atapas account to an organization to help manage the project in a better way. The new organization URL is: https://github.com/reactplay.

The movement will take place between 12:30 - 14:00 hrs IST(7:00 am - 8:30 am GMT), 30th May 2022. Please refrain from pushing any changes between this time.

We will inform you when the movement is complete. You need to make a few minimal configuration changes after that. We will let you know.

[atapas]

Hello @nirban256

We will be moving the react-play project from the atapas account to an organization to help manage the project in a better way. The new organization URL is: https://github.com/reactplay.

The movement will take place between 12:30 - 14:00 hrs IST(7:00 am - 8:30 am GMT), 30th May 2022. Please refrain from pushing any changes between this time.

We will inform you when the movement is complete. You need to make a few minimal configuration changes after that. We will let you know.

The migration is complete. You can find the project here: https://github.com/reactplay

You no need to reclone the project. You just need to set the correct upstream. Here is the link: https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/configuring-a-remote-for-a-fork

[nirban256]

Ok @atapas Sir