inviqa-tailwindcss-example/README.md

# 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)
docs: update README 2022-09-09 17:00:00 +00:00			`# Inviqa Tailwind CSS example`
feat: initial commit from Create Next App 2022-09-09 17:00:00 +00:00
docs: update README 2022-09-09 17:00:00 +00:00			`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.`
feat: initial commit from Create Next App 2022-09-09 17:00:00 +00:00
docs: update README 2022-09-09 17:00:00 +00:00			[The original version](https://play.tailwindcss.com/Yfmw8O5UNN) used a number of `@apply` rules to change the appearance based on a `data-theme` attribute.
feat: initial commit from Create Next App 2022-09-09 17:00:00 +00:00
docs: update README 2022-09-09 17:00:00 +00:00			`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.`
feat: initial commit from Create Next App 2022-09-09 17:00:00 +00:00
feat: support dark mode 2022-09-09 17:00:00 +00:00			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.
feat: initial commit from Create Next App 2022-09-09 17:00:00 +00:00
docs: update README 2022-09-09 17:00:00 +00:00			`## Themes`
feat: initial commit from Create Next App 2022-09-09 17:00:00 +00:00
docs: update README 2022-09-09 17:00:00 +00:00			`### Blue`
feat: initial commit from Create Next App 2022-09-09 17:00:00 +00:00
docs: update README 2022-09-09 17:00:00 +00:00			`![](./docs/blue.png)`
feat: initial commit from Create Next App 2022-09-09 17:00:00 +00:00
docs: update README 2022-09-09 17:00:00 +00:00			`### Purple`
feat: initial commit from Create Next App 2022-09-09 17:00:00 +00:00
docs: update README 2022-09-09 17:00:00 +00:00			`![](./docs/purple.png)`
feat: initial commit from Create Next App 2022-09-09 17:00:00 +00:00
docs: update README 2022-09-09 17:00:00 +00:00			`### Teal`
feat: initial commit from Create Next App 2022-09-09 17:00:00 +00:00
docs: update README 2022-09-09 17:00:00 +00:00			`![](./docs/teal.png)`