Init

adamwathan · adamwathan · commit 713bd928d6cb · 2020-09-13T15:55:43.000-04:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+tailwind.dist.css
diff --git a/index.html b/index.html
@@ -0,0 +1,14 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/tailwind.dist.css" />
+    <title>Demo</title>
+  </head>
+  <body>
+    <h1 class="text-5xl font-bold text-primary">Hello</h1>
+    <h1 class="text-5xl font-bold text-primary text-opacity-75">Hello</h1>
+    <h1 class="text-5xl font-bold text-primary text-opacity-50">Hello</h1>
+    <h1 class="text-5xl font-bold text-primary text-opacity-25">Hello</h1>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "tailwind-variable-text-opacity",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "dev": "concurrently \"postcss tailwind.css -o tailwind.dist.css -w\" \"live-server .\""
+  },
+  "dependencies": {
+    "autoprefixer": "^9.8.6",
+    "tailwindcss": "^1.8.9"
+  },
+  "devDependencies": {
+    "concurrently": "^5.3.0",
+    "live-server": "^1.2.1",
+    "postcss-cli": "^7.1.2"
+  }
+}
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,31 @@
+module.exports = {
+  future: {
+    removeDeprecatedGapUtilities: true,
+    purgeLayersByDefault: true,
+  },
+  purge: [],
+  theme: {
+    colors: {
+      primary: ({ opacityVariable, opacityValue }) => {
+        if (opacityValue !== undefined) {
+          return `rgba(var(--color-primary), ${opacityValue})`
+        }
+        if (opacityVariable !== undefined) {
+          return `rgba(var(--color-primary), var(${opacityVariable}, 1))`
+        }
+        return `rgb(var(--color-primary))`
+      },
+      secondary: ({ opacityVariable, opacityValue }) => {
+        if (opacityValue !== undefined) {
+          return `rgba(var(--color-secondary), ${opacityValue})`
+        }
+        if (opacityVariable !== undefined) {
+          return `rgba(var(--color-secondary), var(${opacityVariable}, 1))`
+        }
+        return `rgb(var(--color-secondary))`
+      },
+    },
+  },
+  variants: {},
+  plugins: [],
+}
diff --git a/tailwind.css b/tailwind.css
@@ -0,0 +1,8 @@
+:root {
+  --color-primary: 37, 99, 235;
+  --color-secondary: 253, 224, 71;
+}
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/yarn.lock b/yarn.lock
