opdavies/lab
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
lab/inviqa-tailwindcss-example
History
Oliver Davies 225421ac19 Move all files to inviqa-tailwindcss-example/
2025-09-29 23:19:01 +01:00
..
components Move all files to inviqa-tailwindcss-example/ 2025-09-29 23:19:01 +01:00
docs Move all files to inviqa-tailwindcss-example/ 2025-09-29 23:19:01 +01:00
pages Move all files to inviqa-tailwindcss-example/ 2025-09-29 23:19:01 +01:00
plugins Move all files to inviqa-tailwindcss-example/ 2025-09-29 23:19:01 +01:00
public Move all files to inviqa-tailwindcss-example/ 2025-09-29 23:19:01 +01:00
styles Move all files to inviqa-tailwindcss-example/ 2025-09-29 23:19:01 +01:00
.dockerignore Move all files to inviqa-tailwindcss-example/ 2025-09-29 23:19:01 +01:00
.eslintrc.json Move all files to inviqa-tailwindcss-example/ 2025-09-29 23:19:01 +01:00
.gitignore Move all files to inviqa-tailwindcss-example/ 2025-09-29 23:19:01 +01:00
.yarnrc Move all files to inviqa-tailwindcss-example/ 2025-09-29 23:19:01 +01:00
docker-compose.yaml Move all files to inviqa-tailwindcss-example/ 2025-09-29 23:19:01 +01:00
Dockerfile Move all files to inviqa-tailwindcss-example/ 2025-09-29 23:19:01 +01:00
justfile Move all files to inviqa-tailwindcss-example/ 2025-09-29 23:19:01 +01:00
next.config.js Move all files to inviqa-tailwindcss-example/ 2025-09-29 23:19:01 +01:00
package.json Move all files to inviqa-tailwindcss-example/ 2025-09-29 23:19:01 +01:00
postcss.config.js Move all files to inviqa-tailwindcss-example/ 2025-09-29 23:19:01 +01:00
README.md Move all files to inviqa-tailwindcss-example/ 2025-09-29 23:19:01 +01:00
tailwind.config.js Move all files to inviqa-tailwindcss-example/ 2025-09-29 23:19:01 +01:00
yarn.lock Move all files to inviqa-tailwindcss-example/ 2025-09-29 23:19:01 +01:00

README.md

Inviqa Tailwind CSS example

This is a component from the Inviqa website that I recreated as an example for a front-end community of practice session on utility-first CSS.

The original version 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

Purple

Teal