chore: add tailwind styles to lit migration #4804
Conversation
Pull Request ReportPR Title✅ Title follows the conventional commit spec. Live demo linksBundle Size
SSR Progress
Detailed logssearch : buildInteractiveResultsearch : buildInteractiveInstantResult search : buildInteractiveRecentResult search : buildInteractiveCitation search : buildGeneratedAnswer recommendation : missing SSR support case-assist : missing SSR support insight : missing SSR support commerce : missing SSR support |
| div { | ||
| transition: background-color 0.3s; | ||
|
|
||
| @apply text-white; | ||
| } | ||
|
|
||
| div:hover { | ||
| @apply bg-primary-dark; | ||
| } |
There was a problem hiding this comment.
These styles are just to demonstrate how to combine normal css, inline styles, tailwind @apply rules and tailwind classes directly in the component markup.
There was a problem hiding this comment.
For Tailwind V4, the theme need to be imported with the theme(reference) rule so that the tailwind utilities (including our custom theme) are available. See this for example:
https://github.com/coveo/headless-lit/blob/tsc-tw4/lito/src/components/lito-result-title/lito-result-title.css
(Notice that the theme.css file in that example only contains @theme rules, as other rules cannot be referenced that way)
It is possible to import the theme directly or even tailwind itself instead, but that will result in all their css being embedded in this file.
| static styles: CSSResultGroup = [ | ||
| TailwindLitElement.styles, | ||
| css` | ||
| div { | ||
| border: 1px solid red; | ||
| border-radius: var(--atomic-border-radius-xl); | ||
| } | ||
| `, | ||
| unsafeCSS(styles), | ||
| ]; | ||
|
|
There was a problem hiding this comment.
can't use @apply rules in inline stylesheets
@apply rounded-xl;Can still use css variables, but I don't see a good reason to do this instead of an external stylesheet or tailwind classes...
There was a problem hiding this comment.
If a component does not have a separate stylesheet, no need to add this, as long as the component extends TailwindLitElement tailwind classes will work!
| plugins: [ | ||
| new webpack.NormalModuleReplacementPlugin(/\.tw\.css$/, function ( | ||
| resource | ||
| ) { | ||
| resource.request = resource.request + '.js'; | ||
| }), | ||
| ], |
There was a problem hiding this comment.
needed so webpack can handle the .css.js imports
fpbrault
temporarily deployed
to
PR Artifacts
GitHub Actions
Inactive
fpbrault
force-pushed
the
lab/migrate-one-styles
branch
from
c90928b to
fb0dab6
Compare
fpbrault
had a problem deploying
to
PR Artifacts
GitHub Actions
Failure
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
fpbrault
had a problem deploying
to
PR Artifacts
GitHub Actions
Failure
This reverts commit 55c98cb.
fpbrault
force-pushed
the
lab/migrate-one-styles
branch
from
d48ce6a to
27477e2
Compare
fpbrault
had a problem deploying
to
PR Artifacts
GitHub Actions
Failure
Significant File Size Improvements!
Before
We can't directly compare with
atomic-text, as it previously had no Tailwind classes. Instead, we’ll examineatomic-badge, a relatively similarly sized component.File:
atomic-result-badge.jsAll of the Tailwind styles for all components in the repo are included in every component that uses at least one Tailwind class. For
atomic-result-badge.js, these styles account for 41,137 bytes. Removing them gives a clearer picture of the base file size:After
File:
atomic-text.jsFile:
tailwind.global.tw.css.jsatomic-textcomponent.File:
coveo.tw.css.jsFile:
atomic-text.styles.tw.css.jsatomic-textcomponent.