opdavies/lab
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Move all files to inviqa-tailwindcss-example/

Browse source
This commit is contained in:
Oliver Davies 2025-09-29 23:19:01 +01:00
parent 6d7993bbaa
commit 225421ac19
26 changed files with 0 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

23
inviqa-tailwindcss-example/README.md Normal file
View file

@ -0,0 +1,23 @@
# Inviqa Tailwind CSS example
This is a component from the [Inviqa](https://inviqa.com) website that I recreated as an example for a front-end community of practice session on utility-first CSS.
[The original version](https://play.tailwindcss.com/Yfmw8O5UNN) used a number of `@apply` rules to change the appearance based on a `data-theme` attribute.
After attending the [Pro Tailwind theming workshop](), I moved it into a Next.js application and refactored it to use CSS custom properties, and moved the button and corner styles into a custom plugin.
The `flex-basis` styles have also been moved into a separate plugin, and I've added dark mode support which wasn't in the original version.
## Themes
### Blue
![](./docs/blue.png)
### Purple
![](./docs/purple.png)
### Teal
![](./docs/teal.png)