Add tailwindcss (WIP)

assets.json

@@ -1,3 +1,3 @@
 {
-    "version": 1705435510121
+    "version": 1705517859211
 }

assets/styles/main.scss

@@ -3,6 +3,10 @@
 // ==========================================================================
 @use "sass:math";
 
+@import "node_modules/tailwindcss/base";
+@import "node_modules/tailwindcss/components";
+@import "node_modules/tailwindcss/utilities";
+
 // ==========================================================================
 // Tools
 // ==========================================================================
@@ -66,10 +70,10 @@
 // ==========================================================================
 
 @import "utilities/ratio";
-@import "utilities/grid-column";
+// @import "utilities/grid-column";
 // @import "utilities/widths";
 // @import "utilities/align";
 // @import "utilities/helpers";
 // @import "utilities/states";
-@import "utilities/spacing";
+// @import "utilities/spacing";
 // @import "utilities/print";

build/helpers/postcss.js

@@ -46,7 +46,7 @@
  * @type {Postcss|undefined}        postcss      - The discovered PostCSS function.
  * @type {AcceptedPlugin|undefined} autoprefixer - The discovered Autoprefixer function.
  */
-let postcss, autoprefixer;
+let postcss, autoprefixer, tailwindcss;
 
 try {
     postcss = await import('postcss');
@@ -54,6 +54,9 @@ try {
 
     autoprefixer = await import('autoprefixer');
     autoprefixer = autoprefixer.default;
+
+    tailwindcss = await import('tailwindcss');
+    tailwindcss = tailwindcss.default;
 } catch (err) {
     // do nothing
 }
@@ -67,6 +70,7 @@ const supportsPostCSS = (typeof postcss === 'function');
  * @type {PluginList} A list of supported plugins.
  */
 const pluginsList = [
+    tailwindcss,
     autoprefixer,
 ];
 
@@ -74,6 +78,7 @@ const pluginsList = [
  * @type {PluginMap} A map of supported plugins.
  */
 const pluginsMap = {
+    'tailwindcss': tailwindcss,
     'autoprefixer': autoprefixer,
 };
 

build/tasks/styles.js

@@ -49,6 +49,11 @@ export const defaultPostCSSOptions = {
             sourcesContent: true,
         },
     },
+    plugins: {
+        tailwindcss: {
+            config: resolve('../../tailwind.config.js'),
+        },
+    }
 };
 export const developmentPostCSSOptions = Object.assign({}, defaultPostCSSOptions);
 export const productionPostCSSOptions  = Object.assign({}, defaultPostCSSOptions);

package.json

@@ -10,7 +10,7 @@
         "npm": ">=8.0"
     },
     "scripts": {
-        "start": "node --experimental-json-modules --no-warnings build/watch.js",
+        "dev": "node --experimental-json-modules --no-warnings build/watch.js",
         "build": "node --experimental-json-modules --no-warnings build/build.js"
     },
     "dependencies": {
@@ -28,9 +28,11 @@
         "kleur": "^4.1.5",
         "node-notifier": "^10.0.1",
         "postcss": "^8.4.21",
+        "postcss-import": "^16.0.0",
         "purgecss": "^5.0.0",
         "sass": "^1.69.5",
         "svg-mixer": "~2.3.14",
+        "tailwindcss": "^3.4.1",
         "tiny-glob": "^0.2.9"
     },
     "overrides": {

tailwind.config.js

@@ -0,0 +1,23 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+    prefix: 'u-',
+    content: [
+        './www/**/*.html',
+        './assets/scripts/**/*'
+    ],
+    theme: {
+        screens: {
+            'tiny':     '500px',
+            'small':    '700px',
+            'medium':   '1000px',
+            'large':    '1200px',
+            'big':      '1400px',
+            'huge':     '1600px',
+            'enormous': '1800px',
+            'gigantic': '2000px',
+            'colossal': '2400px'
+        }
+    },
+    plugins: [],
+}
+

www/grid.html

@@ -52,24 +52,24 @@
                 <div class="o-container">
                     <h1 class="c-heading -h1">Hello</h1>
 
-                    <div class="o-grid -col-4 -col-12@from-medium -gutters">
-                        <div class="o-grid_item u-gc-1/8@from-medium" style="background-color: gray;">
-                            <h2 class="c-heading -h2">This grid has 4 columns and 12 columns from `medium` MQ</h2>
+                    <div class="u-grid u-gap-5 u-grid-cols-4 medium:u-grid-cols-12">
+                        <div class="u-col-span-full medium:u-col-span-8" style="background-color: gray;">
+                            <h2 class="c-heading -h2 u-text-slate-400">This grid has 4 columns and 12 columns from `medium` MQ</h2>
                         </div>
 
-                        <div class="o-grid_item u-gc-1/5@from-medium" style="background-color: yellow;">
+                        <div class="u-col-span-full medium:u-col-start-1 medium:u-col-span-4" style="background-color: yellow;">
                             <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita provident distinctio deleniti eaque cumque doloremque aut quo dicta porro commodi, temporibus totam dolor autem tempore quasi ullam sed suscipit vero?</p>
                         </div>
 
-                        <div class="o-grid_item u-gc-5/9@from-medium" style="background-color: red;">
+                        <div class="u-col-span-full medium:u-col-span-4" style="background-color: red;">
                             <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita provident distinctio deleniti eaque cumque doloremque aut quo dicta porro commodi, temporibus totam dolor autem tempore quasi ullam sed suscipit vero?</p>
                         </div>
 
-                        <div class="o-grid_item u-gc-9/13@from-medium" style="background-color: blue;">
+                        <div class="u-col-span-full medium:u-col-span-4" style="background-color: blue;">
                             <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita provident distinctio deleniti eaque cumque doloremque aut quo dicta porro commodi, temporibus totam dolor autem tempore quasi ullam sed suscipit vero?</p>
                         </div>
 
-                        <div class="o-grid_item u-gc-1/3 u-gc-5/13@from-medium" style="background-color: pink;">
+                        <div class="u-col-span-3  medium:u-col-start-5 medium:u-col-end-13" style="background-color: pink;">
                             <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita provident distinctio deleniti eaque cumque doloremque aut quo dicta porro commodi, temporibus totam dolor autem tempore quasi ullam sed suscipit vero?</p>
                         </div>
                     </div>

www/index.html

@@ -57,8 +57,8 @@
             </header>
 
             <main data-module-example>
-                <div class="o-container">
-                    <h1 class="c-heading -h1">Hello</h1>
+                <div class="o-container flex">
+                    <h1 class="c-heading -h1 u-text-3xl u-font-bold medium:u-underline">Hello</h1>
                 </div>
             </main>