simplify tailwind usage

Author: drsm79

.gitignore

@@ -1,6 +1,7 @@
 resources/_gen
 hugo_stats.json
 assets/css/output.css
+public
 # Binaries for programs and plugins
 *.exe
 *.exe~

assets/css/style.css

@@ -1,139 +1,9 @@
-/* Custom styling goes here */
-
-.text-4xl {
-    font-size: 2.25rem;
-    line-height: 2.5rem;
-}
-
-.text-6xl {
-    font-size: 3.75rem;
-    line-height: 1rem;
-}
-
-.text-7xl {
-    font-size: 4.5rem;
-    line-height: 1rem;
-}
-
-.text-8xl {
-    font-size: 6rem;
-    line-height: 1rem;
-}
-
-.text-9xl {
-    font-size: 8rem;
-    line-height: 1rem;
-}
-
-.font-thin {
-    font-weight: 100;
-}
-
-.font-extralight {
-    font-weight: 200;
-}
-
-.font-light {
-    font-weight: 300;
-}
-
-.font-normal {
-    font-weight: 400;
-}
-
-.font-semibold {
-    font-weight: 600;
-}
-
-.font-extrabold {
-    font-weight: 800;
-}
-
-.font-black {
-    font-weight: 900;
-}
-
-.leading-3 {
-    line-height: .75rem;
-}
-
-.leading-4 {
-    line-height: 1rem;
-}
-
-.leading-5 {
-    line-height: 1.25rem;
-}
-
-.leading-6 {
-    line-height: 1.5rem;
-}
-
-.leading-7 {
-    line-height: 1.75rem;
-}
-
-.leading-8 {
-    line-height: 2rem;
-}
-
-.leading-10 {
-    line-height: 2.5rem;
-}
-
-.leading-none {
-    line-height: 1;
-}
-
-.leading-snug {
-    line-height: 1.375;
-}
-
-.leading-relaxed {
-    line-height: 1.625;
-}
-
-.leading-loose {
-    line-height: 2;
-}
-
-.text-left {
-    text-align: left;
-}
-
-.text-justify {
-    text-align: justify;
-}
-
-.text-slate-50 {
-    color: #f8fafc;
-}
-
-.text-slate-100 {
-    color: #f1f5f9;
-}
-
-.text-slate-400 {
-    color: #94a3b8;
-}
-
+/* Custom styling goes here, if not in the tailwind.config.js theme */
 
 .space-x-20 {
     margin-left: 5rem;
 }
 
-.w-80 {
-    width: 20rem;
-}
-
 .w-600 {
     width: 28rem;
-}
-
-.pl-11 {
-    padding-left: 2.75rem;
-}
-
-.pr-4 {
-    padding-top: 1rem;
 }

layouts/partials/cta.html

@@ -1,10 +1,10 @@
 {{ if modBool .i 2 }}
-<div class="w-full text-gray-900 bg-gray-400 px-36 my-12 py-12">
-{{ else }}
-<div class="w-full text-gray-900 bg-white px-36 my-12 py-12">
-{{ end }}
+<div class="w-full text-gray-900 bg-gray-200 px-36 my-12 py-12">
+  {{ else }}
+  <div class="w-full text-gray-900 bg-white px-36 my-12 py-12">
+    {{ end }}
     <section class="container mx-auto text-center py-6 mb-12">
       <h1 class="text-2xl py-4 font-medium">{{ .context.Title }}</h1>
       {{ .context.Content }}
     </section>
-</div>
+  </div>

layouts/partials/footer.html

@@ -1,3 +1,3 @@
-<footer class="text-center p-2 fixed w-full z-30 bottom-0 h-24 bg-gray-400 text-white">
+<footer class="text-center p-2 fixed w-full z-30 bottom-0 h-24 bg-gray-200 text-white">
     The footer is great
 </footer>

package.json

@@ -5,23 +5,23 @@
     "@babel/preset-env": "^7.12.7",
     "autoprefixer": "^10.0.2",
     "object-fit-images": "^3.2.4",
-    "picoapp": "^3.6.2",
     "postcss-cli": "^8.3.0",
     "postcss-nested": "^5.0.1",
     "postcss-object-fit-images": "^1.1.2",
     "postcss-preset-env": "^6.7.0",
-    "tailwindcss": "^3.0.1"
+    "tailwindcss": "^3.0.23"
   },
   "dependencies": {
     "postcss": "^8.3.11",
-    "postcss-scss": "^4.0.2"
+    "postcss-scss": "^4.0.2",
+    "tailwindcss": "^3.0.23"
   },
   "name": "cloudnative-pg",
   "description": "",
   "version": "1.0.0",
   "main": "postcss.config.js",
   "scripts": {
-    "css": "tailwindcss build -i assets/css/main.css -o assets/css/output.css",
+    "css": "npx tailwindcss build -i assets/css/main.css -o assets/css/output.css",
     "prod": "NODE_ENV=production npm run css && hugo server -e production",
     "build": "NODE_ENV=production npm run css && hugo -e production",
     "dev": "NODE_ENV=development npm run css && hugo server -D -e development --disableFastRender",

tailwind.config.js

@@ -1,30 +1,14 @@
-const { screens } = require('tailwindcss/defaultTheme')
-const colors = require('tailwindcss/colors');
+const defaultTheme = require('tailwindcss/defaultTheme')
+
+// https://tailwindcss.com/docs/customizing-colors/#default-color-palette
+
 module.exports = {
-    content: [
-        "./layouts/**/*.html",
-        "./content/**/*.md",
-        "./content/**/*.html",
-        "./assets/scripts/**/*.js"
-    ],
-    variants: {},
     plugins: [],
-    // colors: colors,
-    corePlugins: {
-        textOpacity: false,
-        float: false,
-        clear: false,
-        divideColor: false,
-        divideOpacity: false,
-        divideStyle: false,
-        divideWidth: false,
-        fontVariantNumeric: false,
-        placeholderColor: false,
-        placeholderOpacity: false,
-        ringColor: false,
-        ringOffsetColor: false,
-        ringOffsetWidth: false,
-        ringOpacity: false,
-        ringWidth: false
-    }
+    theme: {
+        extend: {}
+    },
+    content: [
+        './layouts/**/*.{html,js}',
+        './assets/**/*.{html,js}',
+    ]
 }