chore(atomic): migrate to Tailwindcss v3

[ThibodeauJF]

https://coveord.atlassian.net/browse/KIT-1397

Followed https://tailwindcss.com/docs/upgrade-guide

[github-actions]

Thanks for your contribution @ThibodeauJF !
When your pull-request is ready to be merged, check the box below to merge it

• Merge!

[github-actions]

Pull Request Report

PR Title

✅ Title follows the conventional commit spec.

Bundle Size

File	Old (kb)	New (kb)	Change (%)
case-assist	188.2	188.2	0
search	262.8	262.8	0
product-listing	201.6	201.6	0
product-recommendation	185.8	185.8	0
recommendation	184.3	184.3	0

[ThibodeauJF]

We have to use tailwindcss/nesting & put it before tailwind() for it to work, we get errors in the other case, it's reusing postcss-nested underneath.

[ThibodeauJF]

With this, we are getting an issue with mixins & nesting, the following doesn't work (same pattern as used in result templates):

/* Mixin with nesting */
@define-mixin test-mixin {
  input {
    background-color: red;
  }
}

div {
  @mixin test-mixin;
}

The fix is to reuse postcss-nested a second time after tailwind() like we did before. 🍔

[ThibodeauJF]

not sure why it was a dependency ?

[olamothe]

Well, hum, I think it can indeed be seen as a dev dependency, because it's not actually "shipped" to our clients, like they won't actually download and install tailwind when they npm install @coveo/atomic

[olamothe]

Really nice !

[olamothe]

Well, hum, I think it can indeed be seen as a dev dependency, because it's not actually "shipped" to our clients, like they won't actually download and install tailwind when they npm install @coveo/atomic