opdavies/lab
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
No description
9 commits 1 branch 0 tags 7.2 MiB
Find a file
Oliver Davies 19705e904d docs: update README
2022-09-09 18:52:56 +01:00
docs docs: update README 2022-09-09 18:52:56 +01:00
pages refactor: use a multi-theme plugin for colours 2022-09-09 18:52:56 +01:00
plugins refactor: multi-theme plugin with options 2022-09-09 18:52:56 +01:00
public feat: initial commit from Create Next App 2022-09-09 18:52:56 +01:00
styles refactor: add flex basis plugin 2022-09-09 18:52:56 +01:00
.dockerignore build: add Docker 2022-09-09 18:52:56 +01:00
.eslintrc.json feat: initial commit from Create Next App 2022-09-09 18:52:56 +01:00
.gitignore feat: initial commit from Create Next App 2022-09-09 18:52:56 +01:00
.yarnrc feat: initial commit from Create Next App 2022-09-09 18:52:56 +01:00
docker-compose.yaml build: add Docker 2022-09-09 18:52:56 +01:00
Dockerfile feat: initial commit from Create Next App 2022-09-09 18:52:56 +01:00
justfile feat: initial commit from Create Next App 2022-09-09 18:52:56 +01:00
next.config.js feat: initial commit from Create Next App 2022-09-09 18:52:56 +01:00
package.json feat: initial commit from Create Next App 2022-09-09 18:52:56 +01:00
postcss.config.js feat: initial commit from Create Next App 2022-09-09 18:52:56 +01:00
README.md docs: update README 2022-09-09 18:52:56 +01:00
tailwind.config.js refactor: multi-theme plugin with options 2022-09-09 18:52:56 +01:00
yarn.lock feat: initial commit from Create Next App 2022-09-09 18:52:56 +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.

Themes

Blue

Purple

Teal