kepano · kepano · Apr 4, 2025 · Feb 4, 2025
diff --git a/README.md b/README.md
@@ -52,7 +52,7 @@ Flexoki is available for the following apps and tools.
 ### Frameworks
 
 - [Shadcn](https://gist.github.com/phenomen/affd8c346538378548febd20dccdbfcc) by @phenomen
-- [Tailwind](https://gist.github.com/martin-mael/4b50fa8e55da846f3f73399d84fa1848) by @martin-mael
+- [Tailwind](https://github.com/kepano/flexoki/tree/main/tailwind) by @bslobodin
 - [theme.sh](https://github.com/kepano/flexoki/tree/main/theme.sh) by @TheLastZombie
 - [pywal](https://github.com/kepano/flexoki/tree/main/pywal) by @hydroakri
 

diff --git a/tailwind/README.md b/tailwind/README.md
@@ -0,0 +1,15 @@
+# flexoki + tailwind 4 = ❤️
+
+## namespaced.css
+
+Grab this file if you want to use Flexoki palette without affecting any of your existing Tailwind colors, e.g. `bg-flexoki-paper` or `text-flexoki-blue-600`.
+
+- [namespaced.css](namespaced.css)
+- 🔍 [Tailwind Play](https://play.tailwindcss.com/NB8XDrpw9C)
+
+## replacement.css
+
+Grab this file if you want to replace your Tailwind color palette with Flexoki, e.g. `bg-paper` or `text-blue-600`.
+
+- [replacement.css](replacement.css)
+- 🔍 [Tailwind Play](https://play.tailwindcss.com/newNvyEeXE)
diff --git a/tailwind/namespaced.css b/tailwind/namespaced.css
@@ -0,0 +1,176 @@
+@import 'tailwindcss';
+
+/* Specify new namespaced colors. */
+@theme {
+  --color-flexoki-black:       #100F0F;
+  --color-flexoki-paper:       #FFFCF0;
+  --color-flexoki-base-50:     #F2F0E5;
+  --color-flexoki-base-100:    #E6E4D9;
+  --color-flexoki-base-150:    #DAD8CE;
+  --color-flexoki-base-200:    #CECDC3;
+  --color-flexoki-base-300:    #B7B5AC;
+  --color-flexoki-base-400:    #9F9D96;
+  --color-flexoki-base-500:    #878580;
+  --color-flexoki-base-600:    #6F6E69;
+  --color-flexoki-base-700:    #575653;
+  --color-flexoki-base-800:    #403E3C;
+  --color-flexoki-base-850:    #343331;
+  --color-flexoki-base-900:    #282726;
+  --color-flexoki-base-950:    #1C1B1A;
+  --color-flexoki-red-50:      #FFE1D5;
+  --color-flexoki-red-100:     #FFCABB;
+  --color-flexoki-red-150:     #FDB2A2;
+  --color-flexoki-red-200:     #F89A8A;
+  --color-flexoki-red-300:     #E8705F;
+  --color-flexoki-red-400:     #D14D41;
+  --color-flexoki-red-500:     #C03E35;
+  --color-flexoki-red-600:     #AF3029;
+  --color-flexoki-red-700:     #942822;
+  --color-flexoki-red-800:     #6C201C;
+  --color-flexoki-red-850:     #551B18;
+  --color-flexoki-red-900:     #3E1715;
+  --color-flexoki-red-950:     #261312;
+  --color-flexoki-orange-50:   #FFE7CE;
+  --color-flexoki-orange-100:  #FED3AF;
+  --color-flexoki-orange-150:  #FCC192;
+  --color-flexoki-orange-200:  #F9AE77;
+  --color-flexoki-orange-300:  #EC8B49;
+  --color-flexoki-orange-400:  #DA702C;
+  --color-flexoki-orange-500:  #CB6120;
+  --color-flexoki-orange-600:  #BC5215;
+  --color-flexoki-orange-700:  #9D4310;
+  --color-flexoki-orange-800:  #71320D;
+  --color-flexoki-orange-850:  #59290D;
+  --color-flexoki-orange-900:  #40200D;
+  --color-flexoki-orange-950:  #27180E;
+  --color-flexoki-yellow-50:   #FAEEC6;
+  --color-flexoki-yellow-100:  #F6E2A0;
+  --color-flexoki-yellow-150:  #F1D67E;
+  --color-flexoki-yellow-200:  #ECCB60;
+  --color-flexoki-yellow-300:  #DFB431;
+  --color-flexoki-yellow-400:  #D0A215;
+  --color-flexoki-yellow-500:  #BE9207;
+  --color-flexoki-yellow-600:  #AD8301;
+  --color-flexoki-yellow-700:  #8E6B01;
+  --color-flexoki-yellow-800:  #664D01;
+  --color-flexoki-yellow-850:  #503D02;
+  --color-flexoki-yellow-900:  #3A2D04;
+  --color-flexoki-yellow-950:  #241E08;
+  --color-flexoki-green-50:    #EDEECF;
+  --color-flexoki-green-100:   #DDE2B2;
+  --color-flexoki-green-150:   #CDD597;
+  --color-flexoki-green-200:   #BEC97E;
+  --color-flexoki-green-300:   #A0AF54;
+  --color-flexoki-green-400:   #879A39;
+  --color-flexoki-green-500:   #768D21;
+  --color-flexoki-green-600:   #66800B;
+  --color-flexoki-green-700:   #536907;
+  --color-flexoki-green-800:   #3D4C07;
+  --color-flexoki-green-850:   #313D07;
+  --color-flexoki-green-900:   #252D09;
+  --color-flexoki-green-950:   #1A1E0C;
+  --color-flexoki-cyan-50:     #DDF1E4;
+  --color-flexoki-cyan-100:    #BFE8D9;
+  --color-flexoki-cyan-150:    #A2DECE;
+  --color-flexoki-cyan-200:    #87D3C3;
+  --color-flexoki-cyan-300:    #5ABDAC;
+  --color-flexoki-cyan-400:    #3AA99F;
+  --color-flexoki-cyan-500:    #2F968D;
+  --color-flexoki-cyan-600:    #24837B;
+  --color-flexoki-cyan-700:    #1C6C66;
+  --color-flexoki-cyan-800:    #164F4A;
+  --color-flexoki-cyan-850:    #143F3C;
+  --color-flexoki-cyan-900:    #122F2C;
+  --color-flexoki-cyan-950:    #101F1D;
+  --color-flexoki-blue-50:     #E1ECEB;
+  --color-flexoki-blue-100:    #C6DDE8;
+  --color-flexoki-blue-150:    #ABCFE2;
+  --color-flexoki-blue-200:    #92BFDB;
+  --color-flexoki-blue-300:    #66A0C8;
+  --color-flexoki-blue-400:    #4385BE;
+  --color-flexoki-blue-500:    #3171B2;
+  --color-flexoki-blue-600:    #205EA6;
+  --color-flexoki-blue-700:    #1A4F8C;
+  --color-flexoki-blue-800:    #163B66;
+  --color-flexoki-blue-850:    #133051;
+  --color-flexoki-blue-900:    #12253B;
+  --color-flexoki-blue-950:    #101A24;
+  --color-flexoki-purple-50:   #F0EAEC;
+  --color-flexoki-purple-100:  #E2D9E9;
+  --color-flexoki-purple-150:  #D3CAE6;
+  --color-flexoki-purple-200:  #C4B9E0;
+  --color-flexoki-purple-300:  #A699D0;
+  --color-flexoki-purple-400:  #8B7EC8;
+  --color-flexoki-purple-500:  #735EB5;
+  --color-flexoki-purple-600:  #5E409D;
+  --color-flexoki-purple-700:  #4F3685;
+  --color-flexoki-purple-800:  #3C2A62;
+  --color-flexoki-purple-850:  #31234E;
+  --color-flexoki-purple-900:  #261C39;
+  --color-flexoki-purple-950:  #1A1623;
+  --color-flexoki-magenta-50:  #FEE4E5;
+  --color-flexoki-magenta-100: #FCCFDA;
+  --color-flexoki-magenta-150: #F9B9CF;
+  --color-flexoki-magenta-200: #F4A4C2;
+  --color-flexoki-magenta-300: #E47DA8;
+  --color-flexoki-magenta-400: #CE5D97;
+  --color-flexoki-magenta-500: #B74583;
+  --color-flexoki-magenta-600: #A02F6F;
+  --color-flexoki-magenta-700: #87285E;
+  --color-flexoki-magenta-800: #641F46;
+  --color-flexoki-magenta-850: #4F1B39;
+  --color-flexoki-magenta-900: #39172B;
+  --color-flexoki-magenta-950: #24131D;
+}
+
+/* Define some semantic aliases. */
+@theme inline {
+  --color-flexoki-light-bg:    var(--color-flexoki-paper);
+  --color-flexoki-light-bg-2:  var(--color-flexoki-base-50);
+  --color-flexoki-light-tx:    var(--color-flexoki-black);
+  --color-flexoki-light-tx-2:  var(--color-flexoki-base-600);
+  --color-flexoki-light-tx-3:  var(--color-flexoki-base-300);
+  --color-flexoki-light-ui:    var(--color-flexoki-base-100);
+  --color-flexoki-light-ui-2:  var(--color-flexoki-base-150);
+  --color-flexoki-light-ui-3:  var(--color-flexoki-base-200);
+  --color-flexoki-dark-bg:     var(--color-flexoki-black);
+  --color-flexoki-dark-bg-2:   var(--color-flexoki-base-950);
+  --color-flexoki-dark-tx:     var(--color-flexoki-base-200);
+  --color-flexoki-dark-tx-2:   var(--color-flexoki-base-500);
+  --color-flexoki-dark-tx-3:   var(--color-flexoki-base-700);
+  --color-flexoki-dark-ui:     var(--color-flexoki-base-900);
+  --color-flexoki-dark-ui-2:   var(--color-flexoki-base-850);
+  --color-flexoki-dark-ui-3:   var(--color-flexoki-base-800);
+  --color-flexoki-light-re:    var(--color-flexoki-red-600);
+  --color-flexoki-light-or:    var(--color-flexoki-orange-600);
+  --color-flexoki-light-ye:    var(--color-flexoki-yellow-600);
+  --color-flexoki-light-gr:    var(--color-flexoki-green-600);
+  --color-flexoki-light-cy:    var(--color-flexoki-cyan-600);
+  --color-flexoki-light-bl:    var(--color-flexoki-blue-600);
+  --color-flexoki-light-pu:    var(--color-flexoki-purple-600);
+  --color-flexoki-light-ma:    var(--color-flexoki-magenta-600);
+  --color-flexoki-dark-re:     var(--color-flexoki-red-400);
+  --color-flexoki-dark-or:     var(--color-flexoki-orange-400);
+  --color-flexoki-dark-ye:     var(--color-flexoki-yellow-400);
+  --color-flexoki-dark-gr:     var(--color-flexoki-green-400);
+  --color-flexoki-dark-cy:     var(--color-flexoki-cyan-400);
+  --color-flexoki-dark-bl:     var(--color-flexoki-blue-400);
+  --color-flexoki-dark-pu:     var(--color-flexoki-purple-400);
+  --color-flexoki-dark-ma:     var(--color-flexoki-magenta-400);
+  --color-flexoki-light-re-2:  var(--color-flexoki-red-400);
+  --color-flexoki-light-or-2:  var(--color-flexoki-orange-400);
+  --color-flexoki-light-ye-2:  var(--color-flexoki-yellow-400);
+  --color-flexoki-light-gr-2:  var(--color-flexoki-green-400);
+  --color-flexoki-light-cy-2:  var(--color-flexoki-cyan-400);
+  --color-flexoki-light-bl-2:  var(--color-flexoki-blue-400);
+  --color-flexoki-light-pu-2:  var(--color-flexoki-purple-400);
+  --color-flexoki-light-ma-2:  var(--color-flexoki-magenta-400);
+  --color-flexoki-dark-re-2:   var(--color-flexoki-red-600);
+  --color-flexoki-dark-or-2:   var(--color-flexoki-orange-600);
+  --color-flexoki-dark-ye-2:   var(--color-flexoki-yellow-600);
+  --color-flexoki-dark-gr-2:   var(--color-flexoki-green-600);
+  --color-flexoki-dark-cy-2:   var(--color-flexoki-cyan-600);
+  --color-flexoki-dark-bl-2:   var(--color-flexoki-blue-600);
+  --color-flexoki-dark-pu-2:   var(--color-flexoki-purple-600);
+  --color-flexoki-dark-ma-2:   var(--color-flexoki-magenta-600);
+}