+
TOP
-
-
+
LEFT
@@ -32,7 +32,7 @@
-
+
-
-
+
BOTTOM
diff --git a/packages/core/src/test/css-core.visual.html b/packages/core/src/test/css-core.visual.html
index fc1dd38e20..f516ada8f1 100644
--- a/packages/core/src/test/css-core.visual.html
+++ b/packages/core/src/test/css-core.visual.html
@@ -11,7 +11,7 @@
-
+
-
+
-
+
-
+
-
+
-
+
-
+
@@ -160,7 +160,7 @@
-
+
-
+
-
+
@@ -544,7 +544,7 @@
- Grid
1
@@ -19,7 +19,7 @@ Grid
AUTO
Text Colors
Default - Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Light-Blue / Hover - Lorem ipsum dolor sit, amet consectetur adipisicing elit.
@@ -30,13 +30,13 @@Text Colors
Warning - Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Danger / Valid - Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Shadow Text & Button
Title
Paragraph
List
- List Item 1 @@ -90,18 +90,18 @@
List
Border & Radius
-Blue / None
+ Blue / None
Normal / Small
- Hover / Normal
- Active / Large
- Valid / Rounded
- Invalid / Rounded
- Warning / Rounded
- Disabled / Rounded
+ Hover / Normal
+ Active / Large
+ Valid / Rounded
+ Invalid / Rounded
+ Warning / Rounded
+ Disabled / Rounded
Typography
@@ -140,12 +140,12 @@
Subtitle 5
x-small-text
Table
Form
@@ -290,7 +290,7 @@
Form
Button
Colors
Modifiers
Colors
1
diff --git a/packages/core/src/test/css-flex.visual.html b/packages/core/src/test/css-flex.visual.html
index 2d70f4dc55..dd8debe740 100644
--- a/packages/core/src/test/css-flex.visual.html
+++ b/packages/core/src/test/css-flex.visual.html
@@ -24,19 +24,19 @@
+
-
Flex direction row 1
Flex direction row 2
+
-
Flex direction row reverse 1
Flex direction row reverse 2
+
-
Flex direction column 1
Flex direction column 2
+
@@ -67,68 +67,68 @@
-
Flex direction column reverse 1
Flex direction column reverse 2
+
-
Justify content flex start
+
-
Justify content flex end
+
-
Justify content center
+
-
Justify content space between
Justify content space between
+
-
Justify content space around
Justify content space around
+
-
Justify content space evenly
Justify content space evenly
+
-
Justify content start
+
-
Justify content end
+
-
Justify content left
+
-
Justify content right
+
-
Align content flex start 1
Align content flex start 2
Align content flex start 3
+
-
Align content flex end 1
Align content flex end 2
Align content flex end 3
+
-
Align content center 1
Align content center 2
Align content center 3
+
-
Align content space between 1
Align content space between 2
Align content space between 3
+
-
Align content space around 1
Align content space around 2
Align content space around 3
+
-
Align content space evenly 1
Align content space evenly 2
Align content space evenly 3
@@ -136,84 +136,84 @@
Align content stretch
+
-
Align content start 1
Align content start 2
+
-
Align content end 1
Align content end 2
+
-
Align content baseline
+
-
Align items flex start 1
Align items flex start 2
Align items flex start 3
+
-
Align items flex end 1
Align items flex end 2
Align items flex end 3
+
-
Align items center
+
-
Align items self start 1
Align items self start 2
+
-
Align items self end 1
Align items self end 2
+
-
Align items stretch
+
-
Align items start 1
Align items start 2
+
-
Align items end 1
Align items end 2
+
-
Align items baseline
+
-
Align self auto 1
Align items flex end 2
Align items flex end 3
-
Align self flex start 1
+
+
- Align self flex start 1
Align items flex end 2
Align items flex end 3
-
Align self flex end 1
+
+
- Align self flex end 1
Align items flex start 2
Align items flex start 3
-
Align self center 1
+
+
- Align self center 1
Align items flex start 2
-
Align self baseline 1
+
+
- Align self baseline 1
Align items flex end 2
Align items flex end 3
-
@@ -37,71 +37,71 @@
@@ -109,10 +109,10 @@
@@ -120,10 +120,10 @@
@@ -131,15 +131,15 @@
@@ -149,16 +149,16 @@
@@ -168,7 +168,7 @@
Align self stretch 1
+
+
diff --git a/packages/core/src/test/css-grid.visual.html b/packages/core/src/test/css-grid.visual.html
index 163b37b54c..d1b70aa74b 100644
--- a/packages/core/src/test/css-grid.visual.html
+++ b/packages/core/src/test/css-grid.visual.html
@@ -20,16 +20,16 @@
Align self stretch 1
Align items flex end 2
Align items flex end 3
-
First column
+ First column
-
Second column
+ Second column
-
Third column
+ Third column
-
Fourth column
+ Fourth column
-
Full column
+ Full column
-
Half column
+ Half column
-
Half column
+ Half column
-
1 Third column
+ 1 Third column
-
2 Thirds column
+ 2 Thirds column
-
1 quarter column
+ 1 quarter column
-
3 quarters column
+ 3 quarters column
-
1 fifth column
+ 1 fifth column
-
4 fifth column
+ 4 fifth column
-
12
+ 12
-
11
+ 11
-
1
+ 1
-
10
+ 10
-
2
+ 2
-
9
+ 9
-
3
+ 3
-
8
+ 8
-
4
+ 4
-
7
+ 7
-
5
+ 5
-
6
+ 6
-
6
+ 6
-
1 Third column
+ 1 Third column
-
3 quarters offset
+ 3 quarters offset
-
First row
+ First row
-
Second row
+ Second row
-
Half
+ Half
-
Half
+ Half
-
Half
+ Half
-
First column
+ First column
-
Second column
+ Second column
-
Third column
+ Third column
-
Fourth column
+ Fourth column
-
-
+
+
+
is-three-quarters-mobile
is-two-thirds-tablet
is-half-desktop
@@ -177,20 +177,20 @@
is-two-thirds-tablet
is-half-desktop
@@ -177,20 +177,20 @@
-
- auto
+ auto
auto
auto
auto
auto
-
First column
+ First column
-
+
@@ -209,22 +209,22 @@
@@ -82,7 +82,7 @@
-
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/tailwind/package.json b/packages/tailwind/package.json
new file mode 100644
index 0000000000..4d0beb3a4c
--- /dev/null
+++ b/packages/tailwind/package.json
@@ -0,0 +1,47 @@
+{
+ "name": "@baloise/ds-tailwind",
+ "version": "18.3.0",
+ "description": "The Baloise Design-System is an open source project for styling awesome web applications that follow the Baloise corporate styling guidelines.",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/baloise/design-system.git"
+ },
+ "publishConfig": {
+ "access": "public"
+ },
+ "homepage": "https://baloise-design-system.vercel.app",
+ "license": "Apache-2.0",
+ "type": "module",
+ "bin": {
+ "ds-tailwind-migrate": "./bin/index.mjs"
+ },
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "build:all": "npx @tailwindcss/cli --optimize -i ./src/all.css -o ./css/all.css && npx @tailwindcss/cli --minify -i ./src/all.css -o ./css/all.min.css",
+ "preview": "vite preview"
+ },
+ "main": "src/index.css",
+ "style": "src/index.css",
+ "files": [
+ "bin/",
+ "css/",
+ "src/"
+ ],
+ "dependencies": {
+ "@baloise/ds-fonts": "18.3.0",
+ "@baloise/ds-tokens": "18.3.0",
+ "@phenomnomnominal/tsquery": "6.1.3",
+ "cheerio": "1.0.0-rc.12",
+ "glob": "10.3.10",
+ "prompts": "2.4.2",
+ "replace-in-file": "7.1.0",
+ "tailwindcss": "^4.1.5"
+ },
+ "devDependencies": {
+ "@tailwindcss/cli": "^4.1.6",
+ "@tailwindcss/vite": "^4.1.5",
+ "vite": "^6.3.5"
+ },
+ "gitHead": "4157249628694f5811f322e0a547989ca9a9c6a6"
+}
diff --git a/packages/tailwind/project.json b/packages/tailwind/project.json
new file mode 100644
index 0000000000..604a395575
--- /dev/null
+++ b/packages/tailwind/project.json
@@ -0,0 +1,32 @@
+{
+ "name": "tailwind",
+ "$schema": "../../node_modules/nx/schemas/project-schema.json",
+ "sourceRoot": "packages/tailwind/src",
+ "projectType": "library",
+ "targets": {
+ "build": {
+ "dependsOn": ["prepare"],
+ "executor": "@baloise/ds-nx:build-tailwind",
+ "outputs": ["{projectRoot}/css"],
+ "options": {
+ "projectRoot": "{projectRoot}",
+ "tokensRoot": "{workspaceRoot}/packages/tokens"
+ }
+ },
+ "prepare": {
+ "executor": "nx:run-commands",
+ "options": {
+ "cwd": "{projectRoot}",
+ "command": "npm run build && npm run build:all"
+ }
+ },
+ "link": {
+ "executor": "nx:run-commands",
+ "options": {
+ "cwd": "{projectRoot}",
+ "command": "npm link"
+ }
+ }
+ },
+ "tags": ["scope:release", "scope:docs", "scope:visual", "type:package"]
+}
diff --git a/packages/tailwind/src/all.css b/packages/tailwind/src/all.css
new file mode 100644
index 0000000000..f84f7e069c
--- /dev/null
+++ b/packages/tailwind/src/all.css
@@ -0,0 +1,2 @@
+@import './base';
+@import './sets/all';
diff --git a/packages/tailwind/src/base.css b/packages/tailwind/src/base.css
new file mode 100644
index 0000000000..8a0c79c56e
--- /dev/null
+++ b/packages/tailwind/src/base.css
@@ -0,0 +1,10 @@
+@import '@baloise/ds-fonts/css/fonts.css';
+@import '@baloise/ds-styles/css/structure';
+@import '@baloise/ds-styles/css/core';
+
+@import 'tailwindcss';
+
+@import './theme';
+@import './variant';
+@import './layer';
+@import './utilities';
diff --git a/packages/tailwind/src/index.css b/packages/tailwind/src/index.css
new file mode 100644
index 0000000000..c8567498b4
--- /dev/null
+++ b/packages/tailwind/src/index.css
@@ -0,0 +1 @@
+@import './base';
diff --git a/packages/tailwind/src/layer.css b/packages/tailwind/src/layer.css
new file mode 100644
index 0000000000..566966f49d
--- /dev/null
+++ b/packages/tailwind/src/layer.css
@@ -0,0 +1,13 @@
+@layer base {
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6,
+ a,
+ button {
+ font-family: var(--font-title);
+ font-weight: var(--bal-font-weight-bold);
+ }
+}
diff --git a/packages/tailwind/src/sets/all.css b/packages/tailwind/src/sets/all.css
new file mode 100644
index 0000000000..29b70a6556
--- /dev/null
+++ b/packages/tailwind/src/sets/all.css
@@ -0,0 +1,8 @@
+@import './background.set';
+@import './border.set';
+@import './elevation.set';
+@import './flex.set';
+@import './interactions.set';
+@import './display.set';
+@import './sizing.set';
+@import './typography.set.css';
diff --git a/packages/tailwind/src/sets/background.set.css b/packages/tailwind/src/sets/background.set.css
new file mode 100644
index 0000000000..1614bd9052
--- /dev/null
+++ b/packages/tailwind/src/sets/background.set.css
@@ -0,0 +1,86 @@
+@source inline("{hover:,focus:,active:,}bg-primary");
+@source inline("{hover:,focus:,active:,}bg-green-light");
+@source inline("{hover:,focus:,active:,}bg-green");
+@source inline("{hover:,focus:,active:,}bg-purple-light");
+@source inline("{hover:,focus:,active:,}bg-purple");
+@source inline("{hover:,focus:,active:,}bg-yellow-light");
+@source inline("{hover:,focus:,active:,}bg-yellow");
+@source inline("{hover:,focus:,active:,}bg-red-light");
+@source inline("{hover:,focus:,active:,}bg-red");
+@source inline("{hover:,focus:,active:,}bg-white");
+@source inline("{hover:,focus:,active:,}bg-grey-light");
+@source inline("{hover:,focus:,active:,}bg-grey");
+@source inline("{hover:,focus:,active:,}bg-disabled");
+@source inline("{hover:,focus:,active:,}bg-info");
+@source inline("{hover:,focus:,active:,}bg-success");
+@source inline("{hover:,focus:,active:,}bg-warning");
+@source inline("{hover:,focus:,active:,}bg-danger");
+@source inline("{hover:,focus:,active:,}bg-light-blue");
+@source inline("{hover:,focus:,active:,}bg-primary-1");
+@source inline("{hover:,focus:,active:,}bg-primary-2");
+@source inline("{hover:,focus:,active:,}bg-primary-3");
+@source inline("{hover:,focus:,active:,}bg-primary-4");
+@source inline("{hover:,focus:,active:,}bg-primary-5");
+@source inline("{hover:,focus:,active:,}bg-primary-6");
+@source inline("{hover:,focus:,active:,}bg-green-1");
+@source inline("{hover:,focus:,active:,}bg-green-2");
+@source inline("{hover:,focus:,active:,}bg-green-3");
+@source inline("{hover:,focus:,active:,}bg-green-4");
+@source inline("{hover:,focus:,active:,}bg-green-5");
+@source inline("{hover:,focus:,active:,}bg-green-6");
+@source inline("{hover:,focus:,active:,}bg-purple-1");
+@source inline("{hover:,focus:,active:,}bg-purple-2");
+@source inline("{hover:,focus:,active:,}bg-purple-3");
+@source inline("{hover:,focus:,active:,}bg-purple-4");
+@source inline("{hover:,focus:,active:,}bg-purple-5");
+@source inline("{hover:,focus:,active:,}bg-purple-6");
+@source inline("{hover:,focus:,active:,}bg-yellow-1");
+@source inline("{hover:,focus:,active:,}bg-yellow-2");
+@source inline("{hover:,focus:,active:,}bg-yellow-3");
+@source inline("{hover:,focus:,active:,}bg-yellow-4");
+@source inline("{hover:,focus:,active:,}bg-yellow-5");
+@source inline("{hover:,focus:,active:,}bg-yellow-6");
+@source inline("{hover:,focus:,active:,}bg-red-1");
+@source inline("{hover:,focus:,active:,}bg-red-2");
+@source inline("{hover:,focus:,active:,}bg-red-3");
+@source inline("{hover:,focus:,active:,}bg-red-4");
+@source inline("{hover:,focus:,active:,}bg-red-5");
+@source inline("{hover:,focus:,active:,}bg-red-6");
+@source inline("{hover:,focus:,active:,}bg-grey-1");
+@source inline("{hover:,focus:,active:,}bg-grey-2");
+@source inline("{hover:,focus:,active:,}bg-grey-3");
+@source inline("{hover:,focus:,active:,}bg-grey-4");
+@source inline("{hover:,focus:,active:,}bg-grey-5");
+@source inline("{hover:,focus:,active:,}bg-grey-6");
+@source inline("{hover:,focus:,active:,}bg-black");
+@source inline("{hover:,focus:,active:,}bg-light-blue-1");
+@source inline("{hover:,focus:,active:,}bg-light-blue-2");
+@source inline("{hover:,focus:,active:,}bg-light-blue-3");
+@source inline("{hover:,focus:,active:,}bg-light-blue-4");
+@source inline("{hover:,focus:,active:,}bg-light-blue-5");
+@source inline("{hover:,focus:,active:,}bg-light-blue-6");
+@source inline("{hover:,focus:,active:,}bg-info-1");
+@source inline("{hover:,focus:,active:,}bg-info-2");
+@source inline("{hover:,focus:,active:,}bg-info-3");
+@source inline("{hover:,focus:,active:,}bg-info-4");
+@source inline("{hover:,focus:,active:,}bg-info-5");
+@source inline("{hover:,focus:,active:,}bg-info-6");
+@source inline("{hover:,focus:,active:,}bg-success-1");
+@source inline("{hover:,focus:,active:,}bg-success-2");
+@source inline("{hover:,focus:,active:,}bg-success-3");
+@source inline("{hover:,focus:,active:,}bg-success-4");
+@source inline("{hover:,focus:,active:,}bg-success-5");
+@source inline("{hover:,focus:,active:,}bg-success-6");
+@source inline("{hover:,focus:,active:,}bg-warning-1");
+@source inline("{hover:,focus:,active:,}bg-warning-2");
+@source inline("{hover:,focus:,active:,}bg-warning-3");
+@source inline("{hover:,focus:,active:,}bg-warning-4");
+@source inline("{hover:,focus:,active:,}bg-warning-5");
+@source inline("{hover:,focus:,active:,}bg-warning-6");
+@source inline("{hover:,focus:,active:,}bg-danger-1");
+@source inline("{hover:,focus:,active:,}bg-danger-2");
+@source inline("{hover:,focus:,active:,}bg-danger-3");
+@source inline("{hover:,focus:,active:,}bg-danger-4");
+@source inline("{hover:,focus:,active:,}bg-danger-5");
+@source inline("{hover:,focus:,active:,}bg-danger-6");
+@source inline("{hover:,focus:,active:,}bg-transparent");
diff --git a/packages/tailwind/src/sets/border.set.css b/packages/tailwind/src/sets/border.set.css
new file mode 100644
index 0000000000..8c8cbd1461
--- /dev/null
+++ b/packages/tailwind/src/sets/border.set.css
@@ -0,0 +1,43 @@
+@source inline("{hover:,focus:,active:,}border-primary");
+@source inline("{hover:,focus:,active:,}border-primary-light");
+@source inline("{hover:,focus:,active:,}border-grey-light");
+@source inline("{hover:,focus:,active:,}border-grey");
+@source inline("{hover:,focus:,active:,}border-grey-dark");
+@source inline("{hover:,focus:,active:,}border-white");
+@source inline("{hover:,focus:,active:,}border-info");
+@source inline("{hover:,focus:,active:,}border-success");
+@source inline("{hover:,focus:,active:,}border-warning");
+@source inline("{hover:,focus:,active:,}border-danger");
+@source inline("{hover:,focus:,active:,}border-info-hovered");
+@source inline("{hover:,focus:,active:,}border-info-pressed");
+@source inline("{hover:,focus:,active:,}border-primary-hovered");
+@source inline("{hover:,focus:,active:,}border-primary-pressed");
+@source inline("{hover:,focus:,active:,}border-success-hovered");
+@source inline("{hover:,focus:,active:,}border-success-pressed");
+@source inline("{hover:,focus:,active:,}border-warning-hovered");
+@source inline("{hover:,focus:,active:,}border-warning-pressed");
+@source inline("{hover:,focus:,active:,}border-danger-hovered");
+@source inline("{hover:,focus:,active:,}border-danger-pressed");
+@source inline("{hover:,focus:,active:,}border-green-hovered");
+@source inline("{hover:,focus:,active:,}border-green-pressed");
+@source inline("{hover:,focus:,active:,}border-purple-hovered");
+@source inline("{hover:,focus:,active:,}border-purple-pressed");
+@source inline("{hover:,focus:,active:,}border-red-hovered");
+@source inline("{hover:,focus:,active:,}border-red-pressed");
+@source inline("{hover:,focus:,active:,}border-yellow-hovered");
+@source inline("{hover:,focus:,active:,}border-yellow-pressed");
+@source inline("{hover:,focus:,active:,}border-inverted");
+@source inline("{hover:,focus:,active:,}border-inverted-disabled");
+@source inline("{hover:,focus:,active:,}border-inverted-primary");
+@source inline("{hover:,focus:,active:,}border-inverted-primary-hovered");
+@source inline("{hover:,focus:,active:,}border-inverted-primary-pressed");
+
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}rounded-none");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}rounded-normal");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}rounded-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}rounded-full");
+
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}border-none");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}border-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}border-normal");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}border-large");
diff --git a/packages/tailwind/src/sets/display.set.css b/packages/tailwind/src/sets/display.set.css
new file mode 100644
index 0000000000..9d2ad85993
--- /dev/null
+++ b/packages/tailwind/src/sets/display.set.css
@@ -0,0 +1,292 @@
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}hidden");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}block");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}inline");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}inline-block");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}flex");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}inline-flex");
+
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}overflow-auto");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}overflow-hidden");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}overflow-visible");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}overflow-scroll");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}overflow-x-auto");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}overflow-x-hidden");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}overflow-x-visible");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}overflow-x-scroll");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}overflow-y-auto");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}overflow-y-hidden");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}overflow-y-visible");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}overflow-y-scroll");
+
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}static");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}fixed");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}relative");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}absolute");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}sticky");
+
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}align-top");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}align-middle");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}align-bottom");
+
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}z-index-deep");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}z-index");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}z-index-masked");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}z-index-mask");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}z-index-sticky");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}z-index-navigation");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}z-index-popup");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}z-index-modal");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}z-index-toast");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}z-index-tooltip");
+
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}top-auto");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}top-4");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}top-2");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}top-1");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}top-0");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}top-1/2");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}top-full");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}right-auto");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}right-4");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}right-0");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}right-1/2");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}right-full");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}bottom-auto");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}bottom-4");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}bottom-0");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}bottom-1/2");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}bottom-full");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}left-auto");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}left-4");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}left-0");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}left-1/2");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}left-full");
+
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-full");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-screen");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-auto");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-min");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-max");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-fit");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-4");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-8");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-12");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-16");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-20");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-24");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-28");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-32");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-36");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-40");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-44");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-48");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-52");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-56");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-60");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-64");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-68");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-72");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-76");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-80");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-84");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-88");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-92");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-96");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-100");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-104");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-108");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-112");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-116");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-120");
+
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-full");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-screen");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-auto");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-min");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-max");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-fit");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-11/12");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-5/6");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-3/4");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-2/3");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-7/12");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-1/2");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-5/12");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-1/3");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-1/4");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-1/6");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-1/12");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-4");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-8");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-12");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-16");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-20");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-24");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-28");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-32");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-36");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-40");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-44");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-48");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-52");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-56");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-60");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-64");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-68");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-72");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-76");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-80");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-84");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-88");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-92");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-96");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-100");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-104");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-108");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-112");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-116");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}w-120");
+
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}m-xx-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}m-x-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}m-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}m-normal");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}m-medium");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}m-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}m-x-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}m-xx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}m-xxx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}m-xxxx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mx-xx-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mx-x-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mx-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mx-normal");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mx-medium");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mx-x-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mx-xx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mx-xxx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mx-xxxx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}my-xx-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}my-x-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}my-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}my-normal");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}my-medium");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}my-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}my-x-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}my-xx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}my-xxx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}my-xxxx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mt-xx-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mt-x-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mt-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mt-normal");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mt-medium");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mt-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mt-x-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mt-xx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mt-xxx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mt-xxxx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mr-xx-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mr-x-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mr-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mr-normal");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mr-medium");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mr-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mr-x-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mr-xx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mr-xxx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mr-xxxx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mb-xx-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mb-x-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mb-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mb-normal");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mb-medium");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mb-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mb-x-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mb-xx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mb-xxx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}mb-xxxx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}ml-xx-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}ml-x-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}ml-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}ml-normal");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}ml-medium");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}ml-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}ml-x-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}ml-xx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}ml-xxx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}ml-xxxx-large");
+
+/** Padding */
+
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}p-xx-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}p-x-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}p-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}p-normal");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}p-medium");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}p-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}p-x-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}p-xx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}p-xxx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}p-xxxx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}px-xx-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}px-x-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}px-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}px-normal");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}px-medium");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}px-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}px-x-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}px-xx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}px-xxx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}px-xxxx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}py-xx-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}py-x-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}py-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}py-normal");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}py-medium");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}py-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}py-x-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}py-xx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}py-xxx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}py-xxxx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pt-xx-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pt-x-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pt-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pt-normal");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pt-medium");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pt-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pt-x-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pt-xx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pt-xxx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pt-xxxx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pr-xx-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pr-x-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pr-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pr-normal");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pr-medium");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pr-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pr-x-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pr-xx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pr-xxx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pr-xxxx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pb-xx-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pb-x-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pb-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pb-normal");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pb-medium");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pb-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pb-x-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pb-xx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pb-xxx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pb-xxxx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pl-xx-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pl-x-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pl-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pl-normal");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pl-medium");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pl-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pl-x-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pl-xx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pl-xxx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}pl-xxxx-large");
diff --git a/packages/tailwind/src/sets/elevation.set.css b/packages/tailwind/src/sets/elevation.set.css
new file mode 100644
index 0000000000..31cede8315
--- /dev/null
+++ b/packages/tailwind/src/sets/elevation.set.css
@@ -0,0 +1,12 @@
+@source inline("opacity-0");
+@source inline("opacity-30");
+@source inline("opacity-40");
+@source inline("opacity-50");
+@source inline("opacity-60");
+@source inline("opacity-80");
+@source inline("opacity-100");
+
+@source inline("{hover:,focus:,active:,mobile:,tablet:,desktop:,widescreen:,}shadow-small");
+@source inline("{hover:,focus:,active:,mobile:,tablet:,desktop:,widescreen:,}shadow-normal");
+@source inline("{hover:,focus:,active:,mobile:,tablet:,desktop:,widescreen:,}shadow-large");
+@source inline("{hover:,focus:,active:,mobile:,tablet:,desktop:,widescreen:,}text-shadow-normal");
diff --git a/packages/tailwind/src/sets/flex.set.css b/packages/tailwind/src/sets/flex.set.css
new file mode 100644
index 0000000000..3feeaf5765
--- /dev/null
+++ b/packages/tailwind/src/sets/flex.set.css
@@ -0,0 +1,53 @@
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}content-start");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}content-end");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}content-center");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}content-baseline");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}content-between");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}content-around");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}content-evenly");
+
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}items-start");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}items-end");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}items-center");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}items-stretch");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}items-baseline");
+
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}self-start");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}self-end");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}self-center");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}self-stretch");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}self-baseline");
+
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}flex-row");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}flex-row-reverse");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}flex-col");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}flex-col-reverse");
+
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}flex-1");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}flex-auto");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}flex-initial");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}flex-none");
+
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}gap-none");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}gap-auto");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}gap-xx-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}gap-x-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}gap-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}gap-normal");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}gap-medium");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}gap-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}gap-x-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}gap-xx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}gap-xxx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}gap-xxxx-large");
+
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}justify-start");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}justify-end");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}justify-center");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}justify-between");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}justify-around");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}justify-evenly");
+
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}flex-nowrap");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}flex-wrap");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}flex-wrap-reverse");
diff --git a/packages/tailwind/src/sets/interactions.set.css b/packages/tailwind/src/sets/interactions.set.css
new file mode 100644
index 0000000000..fbae02712d
--- /dev/null
+++ b/packages/tailwind/src/sets/interactions.set.css
@@ -0,0 +1,13 @@
+@source inline("cursor-auto");
+@source inline("cursor-pointer");
+@source inline("cursor-wait");
+@source inline("cursor-move");
+@source inline("cursor-not-allowed");
+
+@source inline("pointer-events-auto");
+@source inline("pointer-events-none");
+
+@source inline("select-none");
+@source inline("select-text");
+@source inline("select-all");
+@source inline("select-auto");
diff --git a/packages/tailwind/src/sets/sizing.set.css b/packages/tailwind/src/sets/sizing.set.css
new file mode 100644
index 0000000000..f2c013dacb
--- /dev/null
+++ b/packages/tailwind/src/sets/sizing.set.css
@@ -0,0 +1,38 @@
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}max-h-auto");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}max-h-0");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}max-h-full");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}max-h-screen");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}max-h-min");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}max-h-max");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}max-h-fit");
+
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}min-h-auto");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}min-h-0");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}min-h-full");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}min-h-screen");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}min-h-min");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}min-h-max");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}min-h-fit");
+
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}max-w-auto");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}max-w-0");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}max-w-full");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}max-w-screen");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}max-w-min");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}max-w-max");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}max-w-fit");
+
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}min-w-auto");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}min-w-0");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}min-w-full");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}min-w-screen");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}min-w-min");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}min-w-max");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}min-w-fit");
+
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-full");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-screen");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-auto");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-min");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-max");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}h-fit");
diff --git a/packages/tailwind/src/sets/typography.set.css b/packages/tailwind/src/sets/typography.set.css
new file mode 100644
index 0000000000..6be8051f8c
--- /dev/null
+++ b/packages/tailwind/src/sets/typography.set.css
@@ -0,0 +1,49 @@
+@source inline("{hover:,focus:,active:,}text-primary");
+@source inline("{hover:,focus:,active:,}text-primary-light");
+@source inline("{hover:,focus:,active:,}text-white");
+@source inline("{hover:,focus:,active:,}text-grey-light");
+@source inline("{hover:,focus:,active:,}text-grey");
+@source inline("{hover:,focus:,active:,}text-grey-dark");
+@source inline("{hover:,focus:,active:,}text-info");
+@source inline("{hover:,focus:,active:,}text-warning");
+@source inline("{hover:,focus:,active:,}text-success");
+@source inline("{hover:,focus:,active:,}text-danger");
+@source inline("{hover:,focus:,active:,}text-black");
+@source inline("{hover:,focus:,active:,}text-primary-hovered");
+@source inline("{hover:,focus:,active:,}text-primary-pressed");
+@source inline("{hover:,focus:,active:,}text-danger-hovered");
+@source inline("{hover:,focus:,active:,}text-danger-pressed");
+@source inline("{hover:,focus:,active:,}text-inverted");
+@source inline("{hover:,focus:,active:,}text-inverted-disabled");
+@source inline("{hover:,focus:,active:,}text-inverted-hovered");
+@source inline("{hover:,focus:,active:,}text-inverted-pressed");
+
+@source inline("font-text");
+@source inline("font-tittle");
+
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}text-x-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}text-small");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}text-normal");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}text-medium");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}text-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}text-x-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}text-xx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}text-xxx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}text-xxxx-large");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}text-xxxxx-large");
+
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}text-center");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}text-left");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}text-right");
+@source inline("{mobile:,tablet:,desktop:,widescreen:,}text-justify");
+
+@source inline("lowercase");
+@source inline("uppercase");
+@source inline("capitalize");
+
+@source inline("font-bold");
+@source inline("font-normal");
+@source inline("font-light");
+
+@source inline("whitespace-normal");
+@source inline("whitespace-nowrap");
diff --git a/packages/tailwind/src/theme.css b/packages/tailwind/src/theme.css
new file mode 100644
index 0000000000..744fb3a6ea
--- /dev/null
+++ b/packages/tailwind/src/theme.css
@@ -0,0 +1,237 @@
+@theme {
+ --*: initial;
+ /* --color*: initial; */
+ --color-white: var(--bal-color-white);
+ --color-black: var(--bal-color-black);
+
+ --color-primary-6: var(--bal-color-primary-6);
+ --color-primary-5: var(--bal-color-primary-5);
+ --color-primary-4: var(--bal-color-primary-4);
+ --color-primary-3: var(--bal-color-primary-3);
+ --color-primary-2: var(--bal-color-primary-2);
+ --color-primary-1: var(--bal-color-primary-1);
+
+ --color-light-blue-6: var(--bal-color-light-blue-6);
+ --color-light-blue-5: var(--bal-color-light-blue-5);
+ --color-light-blue-4: var(--bal-color-light-blue-4);
+ --color-light-blue-3: var(--bal-color-light-blue-3);
+ --color-light-blue-2: var(--bal-color-light-blue-2);
+ --color-light-blue-1: var(--bal-color-light-blue-1);
+
+ --color-red-6: var(--bal-color-red-6);
+ --color-red-5: var(--bal-color-red-5);
+ --color-red-4: var(--bal-color-red-4);
+ --color-red-3: var(--bal-color-red-3);
+ --color-red-2: var(--bal-color-red-2);
+ --color-red-1: var(--bal-color-red-1);
+
+ --color-yellow-6: var(--bal-color-yellow-6);
+ --color-yellow-5: var(--bal-color-yellow-5);
+ --color-yellow-4: var(--bal-color-yellow-4);
+ --color-yellow-3: var(--bal-color-yellow-3);
+ --color-yellow-2: var(--bal-color-yellow-2);
+ --color-yellow-1: var(--bal-color-yellow-1);
+
+ --color-purple-6: var(--bal-color-purple-6);
+ --color-purple-5: var(--bal-color-purple-5);
+ --color-purple-4: var(--bal-color-purple-4);
+ --color-purple-3: var(--bal-color-purple-3);
+ --color-purple-2: var(--bal-color-purple-2);
+ --color-purple-1: var(--bal-color-purple-1);
+
+ --color-green-6: var(--bal-color-green-6);
+ --color-green-5: var(--bal-color-green-5);
+ --color-green-4: var(--bal-color-green-4);
+ --color-green-3: var(--bal-color-green-3);
+ --color-green-2: var(--bal-color-green-2);
+ --color-green-1: var(--bal-color-green-1);
+
+ --color-grey-6: var(--bal-color-grey-6);
+ --color-grey-5: var(--bal-color-grey-5);
+ --color-grey-4: var(--bal-color-grey-4);
+ --color-grey-3: var(--bal-color-grey-3);
+ --color-grey-2: var(--bal-color-grey-2);
+ --color-grey-1: var(--bal-color-grey-1);
+
+ --color-danger-6: var(--bal-color-danger-6);
+ --color-danger-5: var(--bal-color-danger-5);
+ --color-danger-4: var(--bal-color-danger-4);
+ --color-danger-3: var(--bal-color-danger-3);
+ --color-danger-2: var(--bal-color-danger-2);
+ --color-danger-1: var(--bal-color-danger-1);
+
+ --color-warning-6: var(--bal-color-warning-6);
+ --color-warning-5: var(--bal-color-warning-5);
+ --color-warning-4: var(--bal-color-warning-4);
+ --color-warning-3: var(--bal-color-warning-3);
+ --color-warning-2: var(--bal-color-warning-2);
+ --color-warning-1: var(--bal-color-warning-1);
+
+ --color-success-6: var(--bal-color-success-6);
+ --color-success-5: var(--bal-color-success-5);
+ --color-success-4: var(--bal-color-success-4);
+ --color-success-3: var(--bal-color-success-3);
+ --color-success-2: var(--bal-color-success-2);
+ --color-success-1: var(--bal-color-success-1);
+
+ --color-info-6: var(--bal-color-info-6);
+ --color-info-5: var(--bal-color-info-5);
+ --color-info-4: var(--bal-color-info-4);
+ --color-info-3: var(--bal-color-info-3);
+ --color-info-2: var(--bal-color-info-2);
+ --color-info-1: var(--bal-color-info-1);
+
+ --color-danger: var(--bal-color-danger-3);
+ --color-warning: var(--bal-color-warning-3);
+ --color-success: var(--bal-color-success-3);
+ --color-info: var(--bal-color-info-3);
+ --color-disabled: var(--bal-color-grey-3);
+ --color-grey: var(--bal-color-grey-3);
+ --color-grey-light: var(--bal-color-grey-2);
+ --color-red: var(--bal-color-red-3);
+ --color-red-light: var(--bal-color-red-1);
+ --color-yellow: var(--bal-color-yellow-3);
+ --color-yellow-light: var(--bal-color-yellow-1);
+ --color-purple: var(--bal-color-purple-3);
+ --color-purple-light: var(--bal-color-purple-1);
+ --color-green: var(--bal-color-green-3);
+ --color-green-light: var(--bal-color-green-1);
+ --color-primary: var(--bal-color-primary-5);
+
+ --spacing: 0.25rem;
+
+ /* --font*: initial; */
+ --font-sans: var(--bal-font-family-text);
+ --font-text: var(--bal-font-family-text);
+ --font-title: var(--bal-font-family-title);
+
+ /* --breakpoint*: initial; */
+ --breakpoint-tablet: 769px;
+ --breakpoint-desktop: 1024px;
+ --breakpoint-high-defition: 1280px;
+ --breakpoint-widescreen: 1440px;
+ --breakpoint-fullhd: 1280px;
+
+ /* --text*: initial; */
+ --text-sm: 0.875rem;
+ --text-sm--line-height: 1.125rem;
+ --text-base: 1rem;
+ --text-base--line-height: 1.5;
+ --text-md: 1.125rem;
+ --text-md--line-height: 1.5;
+ --text-lg: 1.25rem;
+ --text-lg--line-height: calc(1.75 / 1.25);
+ --text-xl: 1.5rem;
+ --text-xl--line-height: calc(2 / 1.5);
+ --text-2xl: 1.75rem;
+ --text-2xl--line-height: 1.3;
+ --text-3xl: 2rem;
+ --text-3xl--line-height: 1.3;
+ --text-4xl: 2.5rem;
+ --text-4xl--line-height: 1.3;
+ --text-5xl: 3rem;
+ --text-5xl--line-height: 1.3;
+ --text-6xl: 5rem;
+ --text-6xl--line-height: 1.3;
+
+ --text-small: 0.875rem;
+ --text-small--line-height: 1.125rem;
+ --text-normal: 1rem;
+ --text-normal--line-height: 1.5;
+ --text-medium: 1.125rem;
+ --text-medium--line-height: 1.5;
+ --text-large: 1.25rem;
+ --text-large--line-height: calc(1.75 / 1.25);
+ --text-x-large: 1.5rem;
+ --text-x-large--line-height: calc(2 / 1.5);
+ --text-xx-large: 1.75rem;
+ --text-xx-large--line-height: 1.3;
+ --text-xxx-large: 2rem;
+ --text-xxx-large--line-height: 1.3;
+ --text-xxxx-large: 2.5rem;
+ --text-xxxx-large--line-height: 1.3;
+ --text-xxxxx-large: 3rem;
+ --text-xxxxx-large--line-height: 1.3;
+ --text-xxxxxx-large: 5rem;
+ --text-xxxxxx-large--line-height: 1.3;
+
+ --font-weight-light: 300;
+ --font-weight-normal: 400;
+ --font-weight-bold: 700;
+
+ --tracking-tighter: -0.05em;
+ --tracking-tight: -0.025em;
+ --tracking-normal: 0em;
+ --tracking-wide: 0.025em;
+ --tracking-wider: 0.05em;
+ --tracking-widest: 0.1em;
+
+ --leading-tight: 1.25;
+ --leading-snug: 1.375;
+ --leading-normal: 1.5;
+ --leading-relaxed: 1.625;
+ --leading-loose: 2;
+
+ --radius-small: 0.125rem;
+ --radius-normal: var(--bal-radius-normal);
+ --radius-large: var(--bal-radius-large);
+
+ --shadow-small: var(--bal-shadow-small);
+ --shadow-normal: var(--bal-shadow-normal);
+ --shadow-large: var(--bal-shadow-large);
+
+ --text-shadow-normal: var(--bal-text-shadow-normal);
+
+ --blur-xs: 4px;
+ --blur-sm: 8px;
+ --blur-md: 12px;
+ --blur-lg: 16px;
+ --blur-xl: 24px;
+ --blur-2xl: 40px;
+ --blur-3xl: 64px;
+
+ --perspective-dramatic: 100px;
+ --perspective-near: 300px;
+ --perspective-normal: 500px;
+ --perspective-midrange: 800px;
+ --perspective-distant: 1200px;
+
+ --aspect-video: 16 / 9;
+
+ --ease-in: cubic-bezier(0.4, 0, 1, 1);
+ --ease-out: cubic-bezier(0, 0, 0.2, 1);
+ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+ --animate-spin: spin 1s linear infinite;
+ --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+ --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+ --animate-bounce: bounce 1s infinite;
+
+ @keyframes spin {
+ to {
+ transform: rotate(360deg);
+ }
+ }
+ @keyframes ping {
+ 75%,
+ 100% {
+ transform: scale(2);
+ opacity: 0;
+ }
+ }
+ @keyframes pulse {
+ 50% {
+ opacity: 0.5;
+ }
+ }
+ @keyframes bounce {
+ 0%,
+ 100% {
+ transform: translateY(-25%);
+ animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+ }
+ 50% {
+ transform: none;
+ animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+ }
+ }
+}
diff --git a/packages/tailwind/src/utilities.css b/packages/tailwind/src/utilities.css
new file mode 100644
index 0000000000..5883041bbe
--- /dev/null
+++ b/packages/tailwind/src/utilities.css
@@ -0,0 +1,57 @@
+@import '../css/utilities';
+
+@utility border-none {
+ border: none !important;
+}
+
+@utility border-small {
+ border-width: var(--bal-border-width-small);
+}
+
+@utility border-normal {
+ border-width: var(--bal-border-width-normal);
+}
+
+@utility border-large {
+ border-width: var(--bal-border-width-large);
+}
+
+@utility border-top-none {
+ border-top: none !important;
+}
+
+@utility border-bottom-none {
+ border-bottom: none !important;
+}
+
+@utility border-left-none {
+ border-left: none !important;
+}
+
+@utility border-right-none {
+ border-right: none !important;
+}
+
+@utility gap-none {
+ gap: 0 !important;
+}
+
+@utility gap-auto {
+ gap: auto;
+}
+
+@utility max-h-auto {
+ max-height: auto;
+}
+
+@utility min-h-auto {
+ min-height: auto;
+}
+
+@utility max-w-auto {
+ max-width: auto;
+}
+
+@utility min-w-auto {
+ min-width: auto;
+}
diff --git a/packages/tailwind/src/variant.css b/packages/tailwind/src/variant.css
new file mode 100644
index 0000000000..6a7b5d5924
--- /dev/null
+++ b/packages/tailwind/src/variant.css
@@ -0,0 +1,11 @@
+@custom-variant mobile {
+ @media (max-width: 768px) {
+ @slot;
+ }
+}
+
+@custom-variant touch {
+ @media (max-width: 1023px) {
+ @slot;
+ }
+}
diff --git a/packages/tailwind/test/css-border.visual.html b/packages/tailwind/test/css-border.visual.html
new file mode 100644
index 0000000000..f683d5c454
--- /dev/null
+++ b/packages/tailwind/test/css-border.visual.html
@@ -0,0 +1,91 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/tailwind/test/css-color.visual.html b/packages/tailwind/test/css-color.visual.html
new file mode 100644
index 0000000000..5a560bbd44
--- /dev/null
+++ b/packages/tailwind/test/css-color.visual.html
@@ -0,0 +1,139 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/tailwind/test/css-core.visual.html b/packages/tailwind/test/css-core.visual.html
new file mode 100644
index 0000000000..d9ef7966b6
--- /dev/null
+++ b/packages/tailwind/test/css-core.visual.html
@@ -0,0 +1,641 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/tailwind/test/css-display.visual.html b/packages/tailwind/test/css-display.visual.html
new file mode 100644
index 0000000000..8e1fe4b104
--- /dev/null
+++ b/packages/tailwind/test/css-display.visual.html
@@ -0,0 +1,131 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/tailwind/test/css-flex.visual.html b/packages/tailwind/test/css-flex.visual.html
new file mode 100644
index 0000000000..101b6f065d
--- /dev/null
+++ b/packages/tailwind/test/css-flex.visual.html
@@ -0,0 +1,300 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/tailwind/test/css-grid.visual.html b/packages/tailwind/test/css-grid.visual.html
new file mode 100644
index 0000000000..397a7e56f0
--- /dev/null
+++ b/packages/tailwind/test/css-grid.visual.html
@@ -0,0 +1,233 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/tailwind/test/css-inheritance.visual.html b/packages/tailwind/test/css-inheritance.visual.html
new file mode 100644
index 0000000000..085ad3438f
--- /dev/null
+++ b/packages/tailwind/test/css-inheritance.visual.html
@@ -0,0 +1,70 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/tailwind/test/css-opacity.visual.html b/packages/tailwind/test/css-opacity.visual.html
new file mode 100644
index 0000000000..b452b18d07
--- /dev/null
+++ b/packages/tailwind/test/css-opacity.visual.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/tailwind/test/css-radius.visual.html b/packages/tailwind/test/css-radius.visual.html
new file mode 100644
index 0000000000..1980a733a4
--- /dev/null
+++ b/packages/tailwind/test/css-radius.visual.html
@@ -0,0 +1,69 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/tailwind/test/css-shadow.visual.html b/packages/tailwind/test/css-shadow.visual.html
new file mode 100644
index 0000000000..db8ce5afc9
--- /dev/null
+++ b/packages/tailwind/test/css-shadow.visual.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/tailwind/test/css-spacing.visual.html b/packages/tailwind/test/css-spacing.visual.html
new file mode 100644
index 0000000000..9918303fd6
--- /dev/null
+++ b/packages/tailwind/test/css-spacing.visual.html
@@ -0,0 +1,256 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/tailwind/test/css-structure.visual.html b/packages/tailwind/test/css-structure.visual.html
new file mode 100644
index 0000000000..b36a9cba06
--- /dev/null
+++ b/packages/tailwind/test/css-structure.visual.html
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/tailwind/test/css-typography.visual.html b/packages/tailwind/test/css-typography.visual.html
new file mode 100644
index 0000000000..6c89b1960d
--- /dev/null
+++ b/packages/tailwind/test/css-typography.visual.html
@@ -0,0 +1,119 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/tailwind/todo.md b/packages/tailwind/todo.md
new file mode 100644
index 0000000000..27b84ab411
--- /dev/null
+++ b/packages/tailwind/todo.md
@@ -0,0 +1,10 @@
+- tests
+- ci
+- docs
+- spacing respinsive
+- migration script
+- align fraction from half to 1/2
+- check gap what we have and they dont
+
+- static styles
+ https://tailwindcss.com/docs/detecting-classes-in-source-files#safelisting-specific-utilities
diff --git a/packages/tailwind/vite.config.ts b/packages/tailwind/vite.config.ts
new file mode 100644
index 0000000000..2c3f4401ed
--- /dev/null
+++ b/packages/tailwind/vite.config.ts
@@ -0,0 +1,6 @@
+import tailwindcss from '@tailwindcss/vite'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+ plugins: [tailwindcss()],
+})
Second column with some random large text to make a good case here. Unfortunately, we need more content to
make it visible that the first column is now vertically centered.
@@ -201,7 +201,7 @@
-
My centered column
+ My centered column
-
Stretches to the full height of the row
+ Stretches to the full height of the row
-
+
Second column with some random large text to make a good case here. Unfortunately, we need more content to
make it visible that the first column is now vertically centered.
-
diff --git a/packages/core/src/test/css-radius.visual.html b/packages/core/src/test/css-radius.visual.html
index c6acbba0d6..3b90a0390e 100644
--- a/packages/core/src/test/css-radius.visual.html
+++ b/packages/core/src/test/css-radius.visual.html
@@ -31,7 +31,7 @@
+
Second column with some random large text to make a good case here. Unfortunately, we need more content to
make it visible that the first column is now vertically centered.
-
Stretches to the full height of the row
+ Stretches to the full height of the row
Default
- None
+ None
Top none
Left none
Right none
@@ -40,7 +40,7 @@
Default
- Normal
+ Normal
Top normal
Left normal
Right normal
@@ -49,7 +49,7 @@
Default
- Large
+ Large
Top large
Left large
Right large
@@ -58,7 +58,7 @@
Default
- Rounded
+ Rounded
Top rounded
Left rounded
Right rounded
diff --git a/packages/core/src/test/css-typography.visual.html b/packages/core/src/test/css-typography.visual.html
index e465b3e51c..d76eeb6c07 100644
--- a/packages/core/src/test/css-typography.visual.html
+++ b/packages/core/src/test/css-typography.visual.html
@@ -35,7 +35,7 @@ Title 2
Title 3
Title 4
Title 5
- +Subtitle 1
@@ -56,7 +56,7 @@Subtitle 5
x-small-text
Subtitle 5
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione tempora beatae, accusamus perferendis officia minus voluptatum deserunt excepturi eius doloribus atque fuga, soluta, culpa cum maiores hic quos id sunt! -+
has-no-wrap Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione tempora beatae, accusamus perferendis officia minus voluptatum deserunt excepturi eius doloribus atque fuga, soluta, culpa cum maiores hic quos id sunt! Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione tempora beatae, accusamus @@ -93,21 +93,21 @@
Subtitle 5
is-lowercase
is-uppercase
-is-family-text
-has-text-weight-light
+is-family-text
+has-text-weight-light
has-text-weight-normal
-has-text-weight-bold
+has-text-weight-bold
-is-family-title
-has-text-weight-light
-has-text-weight-normal
-has-text-weight-bold
+is-family-title
+has-text-weight-light
+has-text-weight-normal
+has-text-weight-bold
has-text-centered
-has-text-justified
-has-text-left
-has-text-right
+has-text-centered
+has-text-justified
+has-text-left
+has-text-right
has-text-centered
has-text-justified
diff --git a/packages/core/stencil.config.ts b/packages/core/stencil.config.ts index 30a84e62d0..6bd277ae66 100644 --- a/packages/core/stencil.config.ts +++ b/packages/core/stencil.config.ts @@ -3,10 +3,10 @@ import { sass } from '@stencil/sass' import fg from 'fast-glob' import { join, parse, resolve } from 'path' +import { webOutputTarget } from '@baloise/output-target-web' +import { CustomDocumentationGenerator } from './config/doc-output-target' import { AngularGenerator, AngularModuleGenerator } from './config/stencil.bindings.angular' import { ReactGenerator } from './config/stencil.bindings.react' -import { CustomDocumentationGenerator } from './config/doc-output-target' -import { webOutputTarget } from '@baloise/output-target-web' const IS_BAL_DS_RELEASE = process.env.BAL_DS_RELEASE === 'true' const IS_BAL_DOCUMENTATION = process.env.BAL_DOCUMENTATION === 'true' @@ -111,15 +111,10 @@ export const config: Config = { warn: true, }, { - src: join(packagesDir, 'styles', 'css', 'all.css'), + src: join(packagesDir, 'tailwind', 'css', 'all.min.css'), dest: 'assets/all.css', warn: true, }, - { - src: join(packagesDir, 'styles', 'css', 'basic.min.css'), - dest: 'assets/basic.min.css', - warn: true, - }, { src: join(packagesDir, 'maps', 'dist', 'index.esm.js'), dest: 'assets/maps.js', diff --git a/packages/tailwind/.eslintignore b/packages/tailwind/.eslintignore new file mode 100644 index 0000000000..e0aa0d6514 --- /dev/null +++ b/packages/tailwind/.eslintignore @@ -0,0 +1,4 @@ +node_modules +dist +docs +bin diff --git a/packages/tailwind/.npmignore b/packages/tailwind/.npmignore new file mode 100644 index 0000000000..33080a5cec --- /dev/null +++ b/packages/tailwind/.npmignore @@ -0,0 +1,5 @@ +project.json +tsconfig.json +tsconfig.lib.json +vite.config.ts +scripts diff --git a/packages/tailwind/bin/index.mjs b/packages/tailwind/bin/index.mjs new file mode 100644 index 0000000000..72f3a492d8 --- /dev/null +++ b/packages/tailwind/bin/index.mjs @@ -0,0 +1,644 @@ +#!/usr/bin/env node +import { load } from 'cheerio' +import fs from 'fs' +import path from 'path' +import prompts from 'prompts' +import replace from 'replace-in-file' + +// ================================================================================ +// MAIN +// ================================================================================ +const main = async () => { + const log = logger('Tailwind CSS Migration') + const response = await prompts([ + { + type: 'multiselect', + name: 'targets', + message: 'What do you want to migrate', + choices: [ + { + title: 'html templates (*.html)', + value: 'HTML', + selected: true, + }, + { + title: 'Global stylesheet', + value: 'GLOBAL_STYLES', + selected: false, + }, + { + title: 'inline templates (angular - *.ts)', + value: 'INLINE', + selected: false, + }, + ], + instructions: false, + }, + { + type: (_prev, { targets }) => + targets.includes('HTML') || targets.includes('INLINE') || targets.includes('SCSS') ? 'text' : null, + name: 'pathToComponentFiles', + message: 'Where are your html template files located?', + // initial: path.join('src', 'app'), + initial: path.join('test'), + }, + { + type: (_prev, { targets }) => (targets.includes('CSS_VARIABLES') ? 'text' : null), + name: 'pathToStylesheets', + message: 'Where are your scss style files located?', + initial: path.join('src'), + }, + { + type: (_prev, { targets }) => (targets.includes('GLOBAL_STYLES') ? 'text' : null), + name: 'pathGlobalStylesheet', + message: 'Where is your global stylesheet located, with the imports?', + initial: path.join('src', 'styles.scss'), + }, + ]) + + log.info() + log.start() + log.info() + + const { targets, utils, pathGlobalStylesheet, pathToComponentFiles, pathToStylesheets } = response + + const filePath = path.join(process.cwd(), `${(pathToComponentFiles || 'src/app').trim()}`) + const globalStyleSheetPath = path.join(process.cwd(), `${(pathGlobalStylesheet || 'src/styles.scss').trim()}`) + + const isDirectory = await isDirectoryFn({ filePath }) + const directoryPath = isDirectory ? filePath : path.dirname(filePath) + + let isFile = false + if ((targets.includes('HTML') || targets.includes('SCSS') || targets.includes('INLINE')) && !isDirectory) { + try { + isFile = await isFileFn({ filePath }) + } catch (error) { + log.fail(`Could not find directory or file at ${filePath}`, error) + return exit() + } + } + + let doesGlobalStylesheetExist = false + if (targets.includes('GLOBAL_STYLES')) { + try { + doesGlobalStylesheetExist = await isFileFn({ + filePath: globalStyleSheetPath, + }) + } catch (error) { + log.info(`Could not find global stylesheet at ${globalStyleSheetPath}`, error) + } + } + + const extension = path.extname(filePath) + const context = { + log, + isDirectory, + directoryPath, + isFile, + filePath, + extension, + utils, + targets, + globalStyleSheetPath, + } + + if (targets.includes('INLINE') || targets.includes('HTML')) { + const utilReplacers = filterReplacers(context) + + // if (targets.includes('INLINE')) { + // await migrateInlineTemplates({ ...context, utilReplacers }) + // } + + if (targets.includes('HTML')) { + await migrateHtmlFiles({ ...context, utilReplacers }) + } + } + + log.succeed() + return done() +} + +// ================================================================================ +// UTILITIES +// ================================================================================ + +async function migrateHtmlFiles({ filePath, log, utilReplacers }) { + // check if path is directly one file + const isFile = filePath.trim().endsWith('.html') + let files = filePath + if (!isFile) { + files = path.join(`${files}`, '**', '*.html') + } + + try { + const results = [ + await replace({ + files: path.normalize(files), + processor: input => { + const $ = load(input) + let content = input + $('[class]').each((index, element) => { + const classes = $(element).attr('class').split(' ') + + const modifiedClasses = classes.map(className => { + for (let index = 0; index < utilReplacers.from.length; index++) { + const oldClassName = utilReplacers.from[index] + const replacement = utilReplacers.to[index] + if (className.match(escapeRegex(oldClassName))) { + return className.replace(oldClassName, replacement) + } + } + return className + }) + + content = content.replace(`class="${classes.join(' ')}"`, `class="${modifiedClasses.join(' ')}"`) + }) + + return content + }, + allowEmptyPaths: true, + glob: { + windowsPathsNoEscape: true, + }, + }), + ] + + let changedFiles = results + .flat() + .filter(result => result.hasChanged) + .map(result => result.file.replace(process.cwd(), '')) + + changedFiles = changedFiles.filter((item, index) => changedFiles.indexOf(item) === index) + + if (changedFiles.length > 0) { + changedFiles.forEach(file => log.list(file)) + } + log.info() + } catch (error) { + log.info() + log.fail(error) + return Promise.reject() + } finally { + return Promise.resolve() + } +} + +function replaceHtml({ template, from, to }) { + const $ = load(template) + let newTemplate = template + $('[class]').each((index, element) => { + const classes = $(element).attr('class').split(' ') + + const modifiedClasses = classes.map(className => { + for (let index = 0; index < from.length; index++) { + const oldClassName = from[index] + const replacement = to[index] + if (className.match(escapeRegex(oldClassName))) { + return className.replace(oldClassName, replacement) + } + } + return className + }) + + newTemplate = newTemplate.replace(`class="${classes.join(' ')}"`, `class="${modifiedClasses.join(' ')}"`) + }) + + return newTemplate +} + +function printResult({ result, log }) { + // filter for only change files and return the path + let changedFiles = result + .flat() + .filter(result => result.hasChanged) + .map(result => result.file.replace(process.cwd(), '')) + + // remove duplications + changedFiles = changedFiles.filter((item, index) => changedFiles.indexOf(item) === index) + + if (changedFiles.length > 0) { + changedFiles.forEach(file => log.list(file)) + } +} + +async function isDirectoryFn({ filePath }) { + try { + const isDirectory = fs.lstatSync(filePath).isDirectory() + return Promise.resolve(isDirectory) + } catch (error) { + return Promise.resolve(false) + } +} + +async function isFileFn({ filePath }) { + try { + const isFile = fs.lstatSync(filePath).isFile() + return Promise.resolve(isFile) + } catch (error) { + return Promise.reject(error) + } +} + +function escapeRegex(string) { + if (typeof string === 'string') { + return string.replace(/[.*+?^${}()|[\]\\/]/g, '\\$&') + } + return string +} + +const breakpointClasses = className => ({ + from: allBreakpoints.map(b => new RegExp(`is-${className}${b ? `-${b}` : ''}`, 'g')), + to: allBreakpoints.map(b => `${b ? `${b}:` : ''}${className}`), +}) + +const spacingClasses = (oldClassName, newClassName) => ({ + from: allSpacingValues.map(s => new RegExp(`${oldClassName}${s ? `-${s}` : ''}`, 'g')), + to: allSpacingValues.map(s => `${newClassName}${s ? `-${s}` : ''}`), +}) + +const exit = () => process.exit(1) +const done = () => process.exit(0) +const log = (message, ...args) => console.log(message, ...args) +const logger = subject => { + let startTime = new Date() + + return { + info: (message, ...args) => { + console.log(message || '', ...args) + }, + start: message => { + startTime = new Date() + log('⏳ ', `${subject} \x1b[90mstarted ...\x1b[0m`, message || '') + }, + succeed: message => { + const endTime = new Date() + const duration = endTime - startTime + const seconds = parseFloat(duration / 1000).toFixed(2) + log('✅ ', `\x1b[32m${subject} \x1b[90mfinished in ${seconds}sec\x1b[0m`, message || '') + }, + fail: message => { + const endTime = new Date() + const duration = endTime - startTime + const seconds = parseFloat(duration / 1000).toFixed(2) + log('❌ ', `\x1b[31m${subject} \x1b[90mfailed after ${seconds}sec\x1b[0m`) + if (message) { + console.error(message) + } + exit() + }, + list: message => { + console.log('\x1b[90mUPDATE\x1b[0m', message) + }, + } +} + +// ================================================================================ +// REPLACEMENTS +// ================================================================================ + +function filterReplacers({ utils }) { + const from = [] + const to = [] + + from.push(replacementsFlexDirections.from) + to.push(replacementsFlexDirections.to) + + from.push(replacementsAlignItems.from) + to.push(replacementsAlignItems.to) + + from.push(replacementsAlignContent.from) + to.push(replacementsAlignContent.to) + + from.push(replacementsAlignSelf.from) + to.push(replacementsAlignSelf.to) + + from.push(replacementsJustifyContent.from) + to.push(replacementsJustifyContent.to) + + from.push(replacementsPosition.from) + to.push(replacementsPosition.to) + + from.push(replacementsVerticalAlign.from) + to.push(replacementsVerticalAlign.to) + + from.push(replacementsHeights.from) + to.push(replacementsHeights.to) + + from.push(replacementsWidths.from) + to.push(replacementsWidths.to) + + from.push(replacementsFontFamily.from) + to.push(replacementsFontFamily.to) + + from.push(replacementsTextAlign.from) + to.push(replacementsTextAlign.to) + + from.push(replacementsFontWeight.from) + to.push(replacementsFontWeight.to) + + from.push(replacementsWhiteSpace.from) + to.push(replacementsWhiteSpace.to) + + from.push(replacementsRadius.from) + to.push(replacementsRadius.to) + + from.push(replacementsBorderWidth.from) + to.push(replacementsBorderWidth.to) + + return { from: from.flat(), to: to.flat() } +} + +const replacementsFlexDirections = { + from: [ + /^flex-direction-row-reverse$/g, + /^flex-direction-row$/g, + /^flex-direction-column-reverse$/g, + /^flex-direction-column$/g, + ], + to: ['flex-row-reverse', 'flex-row', 'flex-col-reverse', 'flex-col'], +} + +const replacementsAlignItems = { + from: [ + /^align-items-start$/g, + /^align-items-end$/g, + /^align-items-center$/g, + /^align-items-stretch$/g, + /^align-items-baseline$/g, + ], + to: ['items-start', 'items-end', 'items-center', 'items-stretch', 'items-baseline'], +} + +const replacementsAlignContent = { + from: [ + /^align-content-start$/g, + /^align-content-end$/g, + /^align-content-center$/g, + /^align-content-baseline$/g, + /^align-content-space-between$/g, + /^align-content-space-around$/g, + /^align-content-space-evenly$/g, + ], + to: [ + 'content-start', + 'content-end', + 'content-center', + 'content-baseline', + 'content-space-between', + 'content-space-around', + 'content-space-evenly', + ], +} + +const replacementsAlignSelf = { + from: [ + /^align-self-start$/g, + /^align-self-end$/g, + /^align-self-center$/g, + /^align-self-stretch$/g, + /^align-self-baseline$/g, + ], + to: ['self-start', 'self-end', 'self-center', 'self-stretch', 'self-baseline'], +} + +const replacementsJustifyContent = { + from: [ + /^justify-content-start$/g, + /^justify-content-end$/g, + /^justify-content-center$/g, + /^justify-content-space-between$/g, + /^justify-content-space-around$/g, + /^justify-content-space-evenly$/g, + ], + to: ['justify-start', 'justify-end', 'justify-center', 'justify-between', 'justify-around', 'justify-evenly'], +} + +const replacementsPosition = { + from: [ + /^top-50$/g, + /^right-50$/g, + /^bottom-50$/g, + /^left-50$/g, + /^top-100$/g, + /^right-100$/g, + /^bottom-100$/g, + /^left-100$/g, + /^top-1rem$/g, + /^right-1rem$/g, + /^bottom-1rem$/g, + /^left-1rem$/g, + /^top-0-5rem$/g, + /^top-0-25rem$/g, + ], + to: [ + 'top-1/2', + 'right-1/2', + 'bottom-1/2', + 'left-1/2', + 'top-full', + 'right-full', + 'bottom-full', + 'left-full', + 'top-4', + 'right-4', + 'bottom-4', + 'left-4', + 'top-2', + 'top-1', + ], +} + +const replacementsVerticalAlign = { + from: [/^vertical-align-top$/g, /^vertical-align-middle$/g, /^vertical-align-bottom$/g], + to: ['align-top', 'align-middle', 'align-bottom'], +} + +const replacementsHeights = { + from: [ + /^h-1rem$/g, + /^h-2rem$/g, + /^h-3rem$/g, + /^h-4rem$/g, + /^h-5rem$/g, + /^h-6rem$/g, + /^h-7rem$/g, + /^h-8rem$/g, + /^h-9rem$/g, + /^h-10rem$/g, + /^h-11rem$/g, + /^h-12rem$/g, + /^h-13rem$/g, + /^h-14rem$/g, + /^h-15rem$/g, + /^h-16rem$/g, + /^h-17rem$/g, + /^h-18rem$/g, + /^h-19rem$/g, + /^h-20rem$/g, + /^h-21rem$/g, + /^h-22rem$/g, + /^h-23rem$/g, + /^h-24rem$/g, + /^h-25rem$/g, + /^h-26rem$/g, + /^h-27rem$/g, + /^h-28rem$/g, + /^h-29rem$/g, + /^h-30rem$/g, + ], + to: [ + 'h-4', + 'h-8', + 'h-12', + 'h-16', + 'h-20', + 'h-24', + 'h-28', + 'h-32', + 'h-36', + 'h-40', + 'h-44', + 'h-48', + 'h-52', + 'h-56', + 'h-60', + 'h-64', + 'h-68', + 'h-72', + 'h-76', + 'h-80', + 'h-84', + 'h-88', + 'h-92', + 'h-96', + 'h-100', + 'h-104', + 'h-108', + 'h-112', + 'h-116', + 'h-120', + ], +} + +const replacementsWidths = { + from: [ + /^w-12$/g, + /^w-11$/g, + /^w-10$/g, + /^w-9$/g, + /^w-8$/g, + /^w-7$/g, + /^w-6$/g, + /^w-5$/g, + /^w-4$/g, + /^w-3$/g, + /^w-2$/g, + /^w-1$/g, + /^w-1rem$/g, + /^w-2rem$/g, + /^w-3rem$/g, + /^w-4rem$/g, + /^w-5rem$/g, + /^w-6rem$/g, + /^w-7rem$/g, + /^w-8rem$/g, + /^w-9rem$/g, + /^w-10rem$/g, + /^w-11rem$/g, + /^w-12rem$/g, + /^w-13rem$/g, + /^w-14rem$/g, + /^w-15rem$/g, + /^w-16rem$/g, + /^w-17rem$/g, + /^w-18rem$/g, + /^w-19rem$/g, + /^w-20rem$/g, + /^w-21rem$/g, + /^w-22rem$/g, + /^w-23rem$/g, + /^w-24rem$/g, + /^w-25rem$/g, + /^w-26rem$/g, + /^w-27rem$/g, + /^w-28rem$/g, + /^w-29rem$/g, + /^w-30rem$/g, + ], + to: [ + 'w-full', + 'w-11/12', + 'w-5/6', + 'w-3/4', + 'w-2/3', + 'w-7/12', + 'w-1/2', + 'w-5/12', + 'w-1/3', + 'w-1/4', + 'w-1/6', + 'w-1/12', + 'w-4', + 'w-8', + 'w-12', + 'w-16', + 'w-20', + 'w-24', + 'w-28', + 'w-32', + 'w-36', + 'w-40', + 'w-44', + 'w-48', + 'w-52', + 'w-56', + 'w-60', + 'w-64', + 'w-68', + 'w-72', + 'w-76', + 'w-80', + 'w-84', + 'w-88', + 'w-92', + 'w-96', + 'w-100', + 'w-104', + 'w-108', + 'w-112', + 'w-116', + 'w-120', + ], +} + +const replacementsFontFamily = { + from: [/^font-family-title$/g, /^font-family-text$/g], + to: ['font-title', 'font-text'], +} + +const replacementsTextAlign = { + from: [/^text-align-center$/g, /^text-align-left$/g, /^text-align-right$/g, /^text-align-justify$/g], + to: ['text-center', 'text-left', 'text-right', 'text-justify'], +} + +const replacementsFontWeight = { + from: [/^font-weight-bold$/g, /^font-weight-regular$/g, /^font-weight-light$/g], + to: ['font-bold', 'font-normal', 'font-light'], +} + +const replacementsWhiteSpace = { + from: [/^white-space-normal$/g, /^white-space-nowrap$/g], + to: ['whitespace-normal', 'whitespace-nowrap'], +} + +const replacementsRadius = { + from: [/^radius-none$/g, /^radius-normal$/g, /^radius-large$/g, /^radius-rounded$/g], + to: ['rounded-none', 'rounded-normal', 'rounded-large', 'rounded-full'], +} + +const replacementsBorderWidth = { + from: [/^border-none$/g, /^border-width-small$/g, /^border-width-normal$/g, /^border-width-large$/g], + to: ['border-none', 'border-small', 'border-normal', 'border-large'], +} + +main() diff --git a/packages/tailwind/index.html b/packages/tailwind/index.html new file mode 100644 index 0000000000..f1bdd4d16f --- /dev/null +++ b/packages/tailwind/index.html @@ -0,0 +1,284 @@ + + + + + + + + + +-
+
- + border + +
- + color + +
- + core + +
- + display + +
- + flex + +
- + grid + +
- + inheritance + +
- + opacity + +
- + radius + +
- + shadow + +
- + spacing + +
- + structure + +
- + typography + +
Hello world!
+ my-link ++ +
+
card
+ +
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores velit ut consequatur qui, officia provident + temporibus sequi deleniti totam voluptatem iusto, inventore, ipsam blanditiis commodi doloremque a maxime + vitae reprehenderit. Velit, cupiditate deleniti delectus voluptatem in nisi rerum magnam. Cumque esse sed + tempore, voluptatum iste consequatur neque ipsa animi eaque mollitia consequuntur doloremque eum autem, + corporis sit dicta aspernatur cum! +
+Border
+None
+ Top
+
+ Left
+ Right
+ Bottom
+ Primary
+ Top
+ Left
+ Right
+ Bottom
+ Grey
+ Top
+ Left
+ Right
+ Bottom
+ Grey dark
+ Top
+ Left
+ Right
+ Bottom
+ Warning
+ Top
+ Left
+ Right
+ Bottom
+ Success
+ Top
+ Left
+ Right
+ Bottom
+ Danger
+ Top
+ Left
+ Right
+ Bottom
+ Primary light
+ Top
+ Left
+ Right
+ Bottom
+ White
+ Top
+ Left
+ Right
+ Bottom
+ Colors
+None
+ Top
+ Left
+ Right
+ Bottom
+ Primary
+ Top
+ Left
+ Right
+ Bottom
+ Grey
+ Top
+ Left
+ Right
+ Bottom
+ Grey dark
+ Top
+ Left
+ Right
+ Bottom
+ Warning
+ Top
+ Left
+ Right
+ Bottom
+ Success
+ Top
+ Left
+ Right
+ Bottom
+ Danger
+ Top
+ Left
+ Right
+ Bottom
+ Primary light
+ Top
+ Left
+ Right
+ Bottom
+ White
+ Top
+ Left
+ Right
+ Bottom
+ Grid
+
+
+ 1
+ 2
+ AUTO
+ Text Colors
+Default - Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+Light-Blue / Hover - Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+Blue-Dark / Active - Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+Grey / Disabled - Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+Hint / Help - Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+Success / Valid - Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+Warning - Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+Danger / Valid - Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+Shadow Text & Button
+Title
+Paragraph
+ +List
+-
+
- List Item 1 +
- List Item 2 +
- + Lorem ipsum dolor sit amet consectetur adipisicing elit. A vitae veniam debitis blanditiis nisi, + voluptatem non praesentium corporis accusantium nihil, magnam quisquam! Consequuntur corrupti fuga + dolorem. Laudantium deserunt voluptatibus inventore. + +
-
+
- List Item 1 +
- List Item 2 +
- + Lorem ipsum dolor sit amet consectetur adipisicing elit. A vitae veniam debitis blanditiis nisi, + voluptatem non praesentium corporis accusantium nihil, magnam quisquam! Consequuntur corrupti fuga + dolorem. Laudantium deserunt voluptatibus inventore. + +
-
+
- List Item 1 +
- List Item 2 +
- + Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, nemo vero. Ex amet beatae veniam + veritatis vitae, labore saepe sed earum. Omnis repellendus, voluptates doloremque necessitatibus alias + mollitia accusamus commodi! + +
-
+
- List Item 1 +
- List Item 2 +
- + Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima fuga, quod nobis id neque sit dolor + debitis explicabo quisquam cum iure, quia temporibus velit? Ipsa aut aliquam tempore repudiandae vero. + +
-
+
- List Item 1 +
- List Item 2 +
- + Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima fuga, quod nobis id neque sit dolor + debitis explicabo quisquam cum iure, quia temporibus velit? Ipsa aut aliquam tempore repudiandae vero. + +
-
+
- List Item 1 +
- List Item 2 +
- + Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima fuga, quod nobis id neque sit dolor + debitis explicabo quisquam cum iure, quia temporibus velit? Ipsa aut aliquam tempore repudiandae vero. + +
Border & Radius
+Blue / None
+ Normal / Small
+ Hover / Normal
+ Active / Large
+ Valid / Rounded
+ Invalid / Rounded
+ Warning / Rounded
+ Disabled / Rounded
+ Typography
+
+
+
+
+
+ Display
+Display-2
+
+
+ Display
+Display-2
+
+
+
+
+
+ Title 1
+Title 2
+Title 3
+Title 4
+Title 5
+
+
+ Subtitle 1
+Subtitle 2
+Subtitle 3
+Subtitle 4
+Subtitle 5
+
+
+
+
+ lead-text
+block-text
+normal
+small-text
+x-small-text
+
+
+ bold
+ Link +Table
+| ID | +Name | + + +
|---|---|
| 1 | +Tony Stark | +
Form
+
+
+
+
+
+
+ This username is available
+
+
+
+
+
+
+ This username is available
+
+
+
+
+
+
+ This username is available
+
+
+
+
+
+
+ This username is available
+
+
+
+
+
+
+ This username is available
+
+
+
+
+
+
+ This username is available
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Button
+Colors
+Modifiers
+ + + +
+
+
+
+
+ Colors
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+ Block 1
+ Block 2
+
+
+ Block mobile 1
+ Block mobile 2
+
+
+ Block tablet 1
+ Block tablet 2
+
+
+ Block desktop 1
+ Block desktop 2
+
+
+ Flex 1
+ Flex 2
+
+
+ Flex mobile 1
+ Flex mobile 2
+
+
+ Flex tablet 1
+ Flex tablet 2
+
+
+ Flex desktop 1
+ Flex desktop 2
+
+
+ Inline 1
+ Inline 2
+
+
+ Inline mobile 1
+ Inline mobile 2
+
+
+ Inline tablet 1
+ Inline tablet 2
+
+
+ Inline desktop 1
+ Inline desktop 2
+
+
+ Inline block 1
+ Inline block 2
+
+
+ Inline block mobile 1
+ Inline block mobile 2
+
+
+ Inline block tablet 1
+ Inline block tablet 2
+
+
+ Inline block desktop 1
+ Inline block desktop 2
+
+
+ Inline flex 1
+ Inline flex 2
+
+
+ Inline flex mobile 1
+ Inline flex mobile 2
+
+
+ Inline flex tablet 1
+ Inline flex tablet 2
+
+
+ Inline flex desktop 1
+ Inline flex desktop 2
+ Hidden mobile
+ Hidden tablet
+ Hidden touch
+ Hidden desktop
+ Hidden high definition
+ Hidden widescreen
+ Hidden fullhd
+
+
+ Flex direction row 1
+ Flex direction row 2
+
+
+ Flex direction row reverse 1
+ Flex direction row reverse 2
+
+
+ Flex direction column 1
+ Flex direction column 2
+
+
+ Flex direction column reverse 1
+ Flex direction column reverse 2
+
+
+ Flex wrap - nowrap 1
+ Flex wrap - nowrap 2
+ Flex wrap - nowrap 3
+ Flex wrap - nowrap 4
+ Flex wrap - nowrap 5
+
+
+ Flex wrap - wrap 1
+ Flex wrap - wrap 2
+ Flex wrap - wrap 3
+ Flex wrap - wrap 4
+ Flex wrap - wrap 5
+
+
+ Flex wrap - wrap reverse 1
+ Flex wrap - wrap reverse 2
+ Flex wrap - wrap reverse 3
+ Flex wrap - wrap reverse 4
+ Flex wrap - wrap reverse 5
+
+
+ Justify content flex start
+
+
+ Justify content flex end
+
+
+ Justify content center
+
+
+ Justify content space between
+ Justify content space between
+
+
+ Justify content space around
+ Justify content space around
+
+
+ Justify content space evenly
+ Justify content space evenly
+
+
+ Justify content start
+
+
+ Justify content end
+
+
+ Justify content left
+
+
+ Justify content right
+
+
+ Align content flex start 1
+ Align content flex start 2
+ Align content flex start 3
+
+
+ Align content flex end 1
+ Align content flex end 2
+ Align content flex end 3
+
+
+ Align content center 1
+ Align content center 2
+ Align content center 3
+
+
+ Align content space between 1
+ Align content space between 2
+ Align content space between 3
+
+
+ Align content space around 1
+ Align content space around 2
+ Align content space around 3
+
+
+ Align content space evenly 1
+ Align content space evenly 2
+ Align content space evenly 3
+
+
+ Align content stretch
+
+
+ Align content start 1
+ Align content start 2
+
+
+ Align content end 1
+ Align content end 2
+
+
+ Align content baseline
+
+
+ Align items flex start 1
+ Align items flex start 2
+ Align items flex start 3
+
+
+ Align items flex end 1
+ Align items flex end 2
+ Align items flex end 3
+
+
+ Align items center
+
+
+ Align items self start 1
+ Align items self start 2
+
+
+ Align items self end 1
+ Align items self end 2
+
+
+ Align items stretch
+
+
+ Align items start 1
+ Align items start 2
+
+
+ Align items end 1
+ Align items end 2
+
+
+ Align items baseline
+
+
+ Align self auto 1
+ Align items flex end 2
+ Align items flex end 3
+
+
+ Align self flex start 1
+ Align items flex end 2
+ Align items flex end 3
+
+
+ Align self flex end 1
+ Align items flex start 2
+ Align items flex start 3
+
+
+ Align self center 1
+ Align items flex start 2
+
+
+ Align self baseline 1
+ Align items flex end 2
+ Align items flex end 3
+
+
+ Align self stretch 1
+ Align items flex end 2
+ Align items flex end 3
+
+
+ Flex grow 1
+ Flex grow 2
+ Flex grow 3
+
+
+ Gap 1
+ Gap 2
+ Gap 3
+ Gap 4
+
+
+ Gap 1
+ Gap 2
+ Gap 3
+ Gap 4
+
+
+ Gap 1
+ Gap 2
+ Gap 3
+ Gap 4
+
+
+ Gap 1
+ Gap 2
+ Gap 3
+ Gap 4
+
+
+ Gap 1
+ Gap 2
+ Gap 3
+ Gap 4
+
+
+ Gap 1
+ Gap 2
+ Gap 3
+ Gap 4
+
+
+ Gap 1
+ Gap 2
+ Gap 3
+ Gap 4
+
+
+ Gap 1
+ Gap 2
+ Gap 3
+ Gap 4
+
+
+ Gap 1
+ Gap 2
+ Gap 3
+ Gap 4
+
+
+ Gap 1
+ Gap 2
+ Gap 3
+ Gap 4
+
+
+ Gap 1
+ Gap 2
+ Gap 3
+ Gap 4
+
+
+
+
+ First column
+
+
+ Second column
+
+
+ Third column
+
+
+ Fourth column
+
+
+
+
+ Full column
+
+
+ Half column
+
+
+ Half column
+
+
+ 1 Third column
+
+
+ 2 Thirds column
+
+
+ 1 quarter column
+
+
+ 3 quarters column
+
+
+ 1 fifth column
+
+
+
+ 4 fifth column
+
+
+ 12
+
+
+ 11
+
+
+ 1
+
+
+ 10
+
+
+ 2
+
+
+ 9
+
+
+ 3
+
+
+ 8
+
+
+ 4
+
+
+ 7
+
+
+ 5
+
+
+ 6
+
+
+ 6
+
+
+
+
+ 1 Third column
+
+
+ 3 quarters offset
+
+
+
+
+ First row
+
+
+ Second row
+
+
+
+
+ Half
+
+
+
+
+
+
+ Half
+
+
+ Half
+
+
+
+
+ First column
+
+
+ Second column
+
+
+ Third column
+
+
+ Fourth column
+
+
+
+
+
+
+
+ is-three-quarters-mobile
+ is-two-thirds-tablet
+ is-half-desktop
+ is-one-third-widescreen
+ is-one-quarter-fullhd +
+ + is-two-thirds-tablet
+ is-half-desktop
+ is-one-third-widescreen
+ is-one-quarter-fullhd +
+
+ auto
+ auto
auto
+
+
+
+ First column
+
+
+
+ Second column with some random large text to make a good case here. Unfortunately, we need more content to
+ make it visible that the first column is now vertically centered.
+
+
+
+
+
+ My centered column
+
+
+
+
+ Stretches to the full height of the row
+
+
+
+ Second column with some random large text to make a good case here. Unfortunately, we need more content to
+ make it visible that the first column is now vertically centered.
+
+
+
+
+ Second column with some random large text to make a good case here. Unfortunately, we need more content to
+ make it visible that the first column is now vertically centered.
+
+
+
+ Stretches to the full height of the row
+ Primary
+
+
+ Flex 1
+ Flex 2
+ 50
+ Shadow Title 4
+0
+ 30
+ 40
+ 50
+ 60
+ 80
+ 1
+ Default
+ None
+ Top none
+ Left none
+ Right none
+ Bottom none
+ Default
+ Normal
+ Top normal
+ Left normal
+ Right normal
+ Bottom normal
+ Default
+ Large
+ Top large
+ Left large
+ Right large
+ Bottom large
+ Default
+ Rounded
+ Top rounded
+ Left rounded
+ Right rounded
+ Bottom rounded
+ Title 4
+Title 4
+
+ xx-large
+
+
+ x-large
+
+
+ large
+
+
+ medium
+
+
+ normal
+
+
+ small
+
+
+ x-small
+
+
+ xx-small
+
+ Spacing with Paddings
+
+
+ xx-large
+ x-large
+ large
+ medium
+ normal
+ small
+ x-small
+ xx-small
+ none
+
+
+ xx-large
+ x-large
+ large
+ medium
+ normal
+ small
+ x-small
+ xx-small
+ none
+
+
+ xx-large
+ x-large
+ large
+ medium
+ normal
+ small
+ x-small
+ xx-small
+ none
+
+
+ xx-large
+ x-large
+ large
+ medium
+ normal
+ small
+ x-small
+ xx-small
+ none
+
+
+ xx-large
+ x-large
+ large
+ medium
+ normal
+ small
+ x-small
+ xx-small
+ none
+
+
+ xx-large
+ x-large
+ large
+ medium
+ normal
+ small
+ x-small
+ xx-small
+ none
+
+ xx-large
+
+
+ x-large
+
+ xx-large
+
+ large
+
+ x-large
+
+ medium
+
+ large
+
+ normal
+
+ medium
+
+ small
+
+ normal
+
+ x-small
+
+ small
+
+ xx-small
+
+ x-small
+ Spacing with Margins
+ xx-small
+
+
+ xx-large
+ x-large
+ large
+ medium
+ normal
+ small
+ x-small
+ xx-small
+ none
+
+
+ xx-large
+ x-large
+ large
+ medium
+ normal
+ small
+ x-small
+ xx-small
+ none
+
+
+ xx-large
+ x-large
+ large
+ medium
+ normal
+ small
+ x-small
+ xx-small
+ none
+
+
+ xx-large
+ x-large
+ large
+ medium
+ normal
+ small
+ x-small
+ xx-small
+ none
+
+
+ xx-large
+ x-large
+ large
+ medium
+ normal
+ small
+ x-small
+ xx-small
+ none
+
+
+ xx-large
+ x-large
+ large
+ medium
+ normal
+ small
+ x-small
+ xx-small
+ none
+ Normal
+ Link ++
small
+strong
+bold
+
+ Bal Heading
+ Bal Text
+ Bal Label
+
+ + Strong Bold ipsum dolor, sit amet consectetur adipisicing elit. Magnam, eum, at + libero sunt quas autem, dolor eius reiciendis quis unde repellendus officia voluptatem ullam quasi + expedita amet rem delectus accusamus! +
+ Link + Link + Span +Native Heading 1
+Native Title 1
+Native Subtile 1
+
+ Bal Heading
+ Bal Text
+ Bal Label
+
+ + Strong Bold ipsum dolor, sit amet consectetur adipisicing elit. Magnam, eum, at + libero sunt quas autem, dolor eius reiciendis quis unde repellendus officia voluptatem ullam quasi + expedita amet rem delectus accusamus! +
+ Link + Link + Span +Native Heading 1
+Native Title 1
+Native Subtile 1
+
+
+
+
+ Display
+Display-2
+
+
+ Display
+Display-2
+
+
+
+
+ Title 1
+Title 2
+Title 3
+Title 4
+Title 5
+ +
+
+ Subtitle 1
+Subtitle 2
+Subtitle 3
+Subtitle 4
+Subtitle 5
+
+
+
+
+ lead-text
+block-text
+normal
+small-text
+x-small-text
+
+
+ bold
+ Link +has-text-primary
+has-text-white
+has-text-black
+has-text-grey-dark
+has-text-grey
+has-text-light-blue
+has-text-primary-dark
+has-text-primary-light
+has-text-success
+has-text-info
+has-text-warning
+has-text-danger
++ Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione tempora beatae, accusamus perferendis officia + minus voluptatum deserunt excepturi eius doloribus atque fuga, soluta, culpa cum maiores hic quos id sunt! + Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione tempora beatae, accusamus perferendis officia + minus voluptatum deserunt excepturi eius doloribus atque fuga, soluta, culpa cum maiores hic quos id sunt! +
++ has-no-wrap Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione tempora beatae, accusamus + perferendis officia minus voluptatum deserunt excepturi eius doloribus atque fuga, soluta, culpa cum maiores + hic quos id sunt! Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione tempora beatae, accusamus + perferendis officia minus voluptatum deserunt excepturi eius doloribus atque fuga, soluta, culpa cum maiores + hic quos id sunt! +
+is-capitalized
+is-lowercase
+is-uppercase
+ +is-family-text
+has-text-weight-light
+has-text-weight-normal
+has-text-weight-bold
+ +is-family-title
+has-text-weight-light
+has-text-weight-normal
+has-text-weight-bold
+has-text-centered
+has-text-justified
+has-text-left
+has-text-right
+ +has-text-centered
+has-text-justified
+has-text-left
+has-text-right
+