From e2a597a5efcd09f99b6e85620971c3e2fc50db12 Mon Sep 17 00:00:00 2001 From: Indrajith K L Date: Sat, 3 Sep 2022 04:02:32 +0530 Subject: Tailwind Build Process Changes --- package.json | 8 +- src/_includes/assets/css/styles.css | 188 +++++++++++++++++++----------------- tailwind.config.js | 7 +- 3 files changed, 112 insertions(+), 91 deletions(-) diff --git a/package.json b/package.json index abccb36..d1b3bba 100644 --- a/package.json +++ b/package.json @@ -6,11 +6,11 @@ "scripts": { "tailwind:process": "npx postcss src/css/styles.css --o src/_includes/assets/css/styles.css --watch", "tailwind:build": "npx postcss src/css/styles.css --o src/_includes/assets/css/styles.css", - "serve": "eleventy --serve", - "eleventy": "eleventy", + "serve": "npx @11ty/eleventy --serve", + "eleventy": "npx @11ty/eleventy", "start": "concurrently \"npm run tailwind:process\" \"npm run serve\"", - "build": "npm run tailwindcli:build && npm run eleventy", - "tailwindcli:build": "npx tailwindcss -i src/css/styles.css -o src/_includes/assets/css/styles.css" + "build": "concurrently \"npm run tailwindcli:build\" \"npm run eleventy\"", + "tailwindcli:build": "npx tailwindcss -i ./src/css/styles.css -o ./src/_includes/assets/css/styles.css" }, "keywords": [], "author": "", diff --git a/src/_includes/assets/css/styles.css b/src/_includes/assets/css/styles.css index 0edf646..e9d5227 100644 --- a/src/_includes/assets/css/styles.css +++ b/src/_includes/assets/css/styles.css @@ -544,12 +544,12 @@ video { .visible { visibility: visible; } -.invisible { - visibility: hidden; -} .absolute { position: absolute; } +.relative { + position: relative; +} .right-0 { right: 0px; } @@ -559,6 +559,14 @@ video { .m-4 { margin: 1rem; } +.-my-8 { + margin-top: -2rem; + margin-bottom: -2rem; +} +.mx-6 { + margin-left: 1.5rem; + margin-right: 1.5rem; +} .mx-auto { margin-left: auto; margin-right: auto; @@ -571,20 +579,6 @@ video { margin-top: 1rem; margin-bottom: 1rem; } -.-my-8 { - margin-top: -2rem; - margin-bottom: -2rem; -} -.mx-6 { - margin-left: 1.5rem; - margin-right: 1.5rem; -} -.mt-2 { - margin-top: 0.5rem; -} -.mt-3 { - margin-top: 0.75rem; -} .mt-10 { margin-top: 2.5rem; } @@ -594,6 +588,9 @@ video { .mr-5 { margin-right: 1.25rem; } +.mt-3 { + margin-top: 0.75rem; +} .mb-10 { margin-bottom: 2.5rem; } @@ -603,17 +600,29 @@ video { .mb-5 { margin-bottom: 1.25rem; } -.mt-5 { - margin-top: 1.25rem; -} .mt-auto { margin-top: auto; } +.ml-auto { + margin-left: auto; +} +.mt-5 { + margin-top: 1.25rem; +} .mt-1 { margin-top: 0.25rem; } -.ml-auto { - margin-left: auto; +.mt-2 { + margin-top: 0.5rem; +} +.ml-0 { + margin-left: 0px; +} +.mr-0 { + margin-right: 0px; +} +.mt-0 { + margin-top: 0px; } .block { display: block; @@ -624,21 +633,36 @@ video { .flex { display: flex; } +.table { + display: table; +} +.contents { + display: contents; +} .hidden { display: none; } -.h-48 { - height: 12rem; -} .h-screen { height: 100vh; } +.h-48 { + height: 12rem; +} .w-full { width: 100%; } .max-w-5xl { max-width: 64rem; } +.border-collapse { + border-collapse: collapse; +} +.transform { + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} +.resize { + resize: both; +} .flex-row { flex-direction: row; } @@ -669,6 +693,13 @@ video { .rounded-full { border-radius: 9999px; } +.border { + border-width: 1px; +} +.bg-black { + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity)); +} .bg-yellow-500 { --tw-bg-opacity: 1; background-color: rgb(234 179 8 / var(--tw-bg-opacity)); @@ -677,53 +708,52 @@ video { --tw-bg-opacity: 1; background-color: rgb(168 85 247 / var(--tw-bg-opacity)); } -.bg-violet-700 { - --tw-bg-opacity: 1; - background-color: rgb(109 40 217 / var(--tw-bg-opacity)); -} .bg-sky-700 { --tw-bg-opacity: 1; background-color: rgb(3 105 161 / var(--tw-bg-opacity)); } -.bg-purple-700 { +.bg-violet-700 { --tw-bg-opacity: 1; - background-color: rgb(126 34 206 / var(--tw-bg-opacity)); + background-color: rgb(109 40 217 / var(--tw-bg-opacity)); } -.bg-black { +.bg-purple-700 { --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + background-color: rgb(126 34 206 / var(--tw-bg-opacity)); } .object-cover { -o-object-fit: cover; object-fit: cover; } -.p-2 { - padding: 0.5rem; -} .p-3 { padding: 0.75rem; } +.p-2 { + padding: 0.5rem; +} .p-6 { padding: 1.5rem; } .p-8 { padding: 2rem; } -.px-3 { - padding-left: 0.75rem; - padding-right: 0.75rem; +.p-10 { + padding: 2.5rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } +.py-4 { + padding-top: 1rem; + padding-bottom: 1rem; +} .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } -.py-4 { - padding-top: 1rem; - padding-bottom: 1rem; +.px-3 { + padding-left: 0.75rem; + padding-right: 0.75rem; } .pl-2 { padding-left: 0.5rem; @@ -740,14 +770,14 @@ video { .font-supply-regular { font-family: supplyRegular, sans-serif; } -.text-2xl { - font-size: 1.5rem; - line-height: 2rem; -} .text-lg { font-size: 1.125rem; line-height: 1.75rem; } +.text-2xl { + font-size: 1.5rem; + line-height: 2rem; +} .text-xl { font-size: 1.25rem; line-height: 1.75rem; @@ -765,6 +795,17 @@ video { .font-medium { font-weight: 500; } +.italic { + font-style: italic; +} +.text-yellow-500 { + --tw-text-opacity: 1; + color: rgb(234 179 8 / var(--tw-text-opacity)); +} +.text-white { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} .text-black { --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); @@ -773,10 +814,6 @@ video { --tw-text-opacity: 1; color: rgb(185 28 28 / var(--tw-text-opacity)); } -.text-white { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} .text-red-600 { --tw-text-opacity: 1; color: rgb(220 38 38 / var(--tw-text-opacity)); @@ -785,15 +822,18 @@ video { --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity)); } -.text-yellow-500 { - --tw-text-opacity: 1; - color: rgb(234 179 8 / var(--tw-text-opacity)); +.underline { + -webkit-text-decoration-line: underline; + text-decoration-line: underline; } .shadow-\[5px_5px_0px_0px_rgba\(0\2c 0\2c 0\2c 255\)\] { --tw-shadow: 5px 5px 0px 0px rgba(0,0,0,255); --tw-shadow-colored: 5px 5px 0px 0px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.outline { + outline-style: solid; +} .line-clamp-1 { overflow: hidden; display: -webkit-box; @@ -948,34 +988,18 @@ pre[class*="language-"] { cursor: help; } -.hover\:text-black:hover { +.hover\:text-white:hover { --tw-text-opacity: 1; - color: rgb(0 0 0 / var(--tw-text-opacity)); + color: rgb(255 255 255 / var(--tw-text-opacity)); } -.hover\:text-white:hover { +.hover\:text-black:hover { --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); + color: rgb(0 0 0 / var(--tw-text-opacity)); } @media (min-width: 768px) { - .md\:visible { - visibility: visible; - } - - .md\:invisible { - visibility: hidden; - } - - .md\:absolute { - position: absolute; - } - - .md\:relative { - position: relative; - } - .md\:ml-0 { margin-left: 0px; } @@ -984,10 +1008,6 @@ pre[class*="language-"] { margin-right: 0px; } - .md\:mt-5 { - margin-top: 1.25rem; - } - .md\:mt-0 { margin-top: 0px; } @@ -996,10 +1016,6 @@ pre[class*="language-"] { margin-top: auto; } - .md\:block { - display: block; - } - .md\:flex { display: flex; } @@ -1025,13 +1041,13 @@ pre[class*="language-"] { line-height: 1.75rem; } - .md\:text-2xl { - font-size: 1.5rem; - line-height: 2rem; - } - .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; } + + .md\:text-2xl { + font-size: 1.5rem; + line-height: 2rem; + } } \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index d37100c..a7918cf 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,6 +1,11 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - content: ["./src/**/*.{njk,md}", "./src/**/*.svg"], + content: [ + "./src/**/*.{njk,md}", + "./src/**/*.svg", + "./src/_includes/assets/css/*.css", + "./public/index.html" + ], theme: { extend: { fontFamily: { -- cgit v1.2.3