refactor: tidy up tailwind configs

- add tailwind to all apps
- share tailwind themes and stuff

apps/main/package.json

@@ -15,6 +15,7 @@
     },
     "devDependencies": {
         "@developomp-site/theme": "workspace:*",
+        "@developomp-site/tailwind-config": "workspace:*",
         "@emotion/css": "^11.11.2",
         "@fontsource/noto-sans-kr": "^5.0.3",
         "@inqling/svelte-icons": "^3.3.2",
@@ -28,11 +29,13 @@
         "eslint-plugin-import": "^2.27.5",
         "eslint-plugin-simple-import-sort": "^10.0.0",
         "eslint-plugin-svelte": "^2.32.2",
+        "postcss": "^8.4.24",
         "prettier": "^2.8.8",
         "prettier-plugin-svelte": "^2.10.1",
         "sass": "^1.63.6",
         "svelte": "^4.0.1",
         "svelte-check": "^3.4.4",
+        "tailwindcss": "^3.3.2",
         "tslib": "^2.6.0",
         "typescript": "^5.1.6",
         "vite": "^4.3.9"

apps/main/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}

apps/main/src/app.css

@@ -1,6 +1,10 @@
 @import "@fontsource/noto-sans-kr/400.css";
 @import "@fontsource/noto-sans-kr/700.css";
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 body {
     /* SvelteKit has 8px margin by default for some reason */
     margin: 0;

apps/main/tailwind.config.js

@@ -0,0 +1,5 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+    presets: [require("@developomp-site/tailwind-config/tailwind.config.js")],
+    content: ["./src/**/*.{html,js,svelte,ts}"],
+}

apps/portfolio/.eslintrc

@@ -2,6 +2,7 @@
     "root": true,
     "env": {
         "browser": true,
+        "node": true,
         "es2020": true
     },
     "parserOptions": {

apps/portfolio/package.json

@@ -23,6 +23,7 @@
     },
     "devDependencies": {
         "@developomp-site/blog-content": "workspace:*",
+        "@developomp-site/tailwind-config": "workspace:*",
         "@linaria/babel-preset": "^4.4.5",
         "@linaria/vite": "^4.2.11",
         "@types/react": "^18.2.14",

apps/portfolio/tailwind.config.js

@@ -1,134 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+    presets: [require("@developomp-site/tailwind-config/tailwind.config")],
     darkMode: "class",
     content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-    theme: {
-        extend: {
-            colors: {
-                // UI
-                /***/ "dark-ui": "#202225",
-                /**/ "light-ui": "#FFFFFF",
-                /***/ "dark-ui-hover": "#3F3F46",
-                /**/ "light-ui-hover": "#EEEEEE",
-                /***/ "dark-ui-bg": "#36393F",
-                /**/ "light-ui-bg": "#F7F7F7",
-                /***/ "dark-ui-border": "#555",
-                /**/ "light-ui-border": "#CCC",
-
-                // text
-                /***/ "dark-text-default": "#EEEEEE",
-                /**/ "light-text-default": "#111111",
-                /***/ "dark-text-high-contrast": "#FFFFFF",
-                /**/ "light-text-high-contrast": "#000000",
-                /***/ "dark-text-gray": "#CCC",
-                /**/ "light-text-gray": "#555",
-
-                // anchor
-                /*********/ anchor: "#66AAFF",
-                /********/ "anchor-accent": "#4592F7",
-                /***/ "dark-anchor-header": "#778899",
-                /**/ "light-anchor-header": "#D3D3D3",
-
-                // card
-                /***/ "dark-card-bg": "#2F3136",
-                /**/ "light-card-bg": "#FFFFFF",
-                /***/ "dark-card-glow": "#FFFFFF33",
-                /**/ "light-card-glow": "#00000040",
-
-                // blockquote
-                /***/ "dark-blockquote-bg": "#FFFFFF12",
-                /**/ "light-blockquote-bg": "#0000000D",
-                /***/ "dark-blockquote-accent": "#FFFFFF4D",
-                /**/ "light-blockquote-accent": "#0000001A",
-
-                // inline code
-                /***/ "dark-inline-code-bg": "#444",
-                /**/ "light-inline-code-bg": "#EEE",
-                /***/ "dark-inline-code-text": "#FFFFFF",
-                /**/ "light-inline-code-text": "#000000",
-                /***/ "dark-inline-code-border": "#666",
-                /**/ "light-inline-code-border": "#BBB",
-
-                // block code
-                // light theme using: highlight.js/styles/default.css
-                // dark theme using: highlight.js/styles/atom-one-dark-reasonable.css
-                /***/ "dark-block-code-border": "#555",
-                /**/ "light-block-code-border": "#BBB",
-                /***/ "dark-block-code-highlight": "#14161A",
-                /**/ "light-block-code-highlight": "#DDDDDD",
-
-                // footer
-                /***/ "dark-footer-bg": "#000000",
-                /**/ "light-footer-bg": "#FFFFFF",
-                /***/ "dark-footer-text": "#808080",
-                /* */ "light-footer-text": "#808080",
-
-                // header
-                /***/ "dark-header-bg": "#202225",
-                /**/ "light-header-bg": "",
-                /***/ "dark-header-hover": "#3F3F46",
-                /**/ "light-header-hover": "",
-                /***/ "dark-header-text": "#D4D4D8",
-                /**/ "light-header-text": "",
-
-                // input
-                /***/ "dark-input-bg": "#36393F",
-                /**/ "light-input-bg": "#EEEEEE",
-                /***/ "dark-input-item-hover": "#202225",
-                /**/ "light-input-item-hover": "#FFFFFF",
-                /***/ "dark-input-border": "#555555",
-                /**/ "light-input-border": "#CCCCCC",
-                /***/ "dark-input-border-hover": "#808080",
-                /**/ "light-input-border-hover": "#808080",
-                /***/ "dark-input-border-focus": "#A3A3A3",
-                /**/ "light-input-border-focus": "#000000",
-                /***/ "dark-input-placeholder": "#A9A9A9",
-                /**/ "light-input-placeholder": "#777777",
-
-                // kbd
-                /***/ "dark-kbd-bg": "#000000",
-                /**/ "light-kbd-bg": "#F7F7F7",
-                /***/ "dark-kbd-text": "#FFFFFF",
-                /**/ "light-kbd-text": "#333333",
-                /***/ "dark-kbd-border": "#555555",
-                /**/ "light-kbd-border": "#CCCCCC",
-                /***/ "dark-kbd-outer-shadow": "#FFFFFF4D",
-                /**/ "light-kbd-outer-shadow": "#00000033",
-                /***/ "dark-kbd-inner-shadow": "#000000",
-                /**/ "light-kbd-inner-shadow": "#FFFFFF",
-
-                // mark
-                /***/ "dark-mark-bg": "#FFFF0080",
-                /**/ "light-mark-bg": "#FFFF00BF",
-                /***/ "dark-mark-text": "#FFFFFF",
-                /**/ "light-mark-text": "#000000",
-
-                // scrollbar
-                /***/ "dark-scrollbar-track": "#18181B",
-                /**/ "light-scrollbar-track": "#FFFFFF",
-                /***/ "dark-scrollbar-thumb": "#888888",
-                /**/ "light-scrollbar-thumb": "#DDDDDD",
-
-                // scroll progress
-                /***/ "dark-scroll-progress-bg": "#52525B",
-                /**/ "light-scroll-progress-bg": "#D4D4D8",
-                /***/ "dark-scroll-progress-fg": "#D4D4D8",
-                /**/ "light-scroll-progress-fg": "#52525B",
-
-                // table
-                /***/ "dark-table-border": "#777777",
-                /**/ "light-table-border": "#DDD",
-                /***/ "dark-table-alt": "#21272E",
-                /**/ "light-table-alt": "#F2F2F2",
-            },
-            fontFamily: {
-                "noto-sans": ['"Noto Sans KR"', "sans-serif"],
-                "source-code-pro": ['"Source Code Pro"', "monospace"],
-            },
-            boxShadow: {
-                glow: "0 0px 10px",
-            },
-        },
-    },
-    plugins: [],
 }

packages/tailwind-config/package.json

@@ -2,7 +2,10 @@
     "name": "@developomp-site/tailwind-config",
     "version": "0.0.0",
     "private": true,
-    "main": "index.js",
+    "main": "tailwind.config.js",
+    "files": [
+        "tailwind.config.js"
+    ],
     "scripts": {
         "clean": "rm -rf node_modules"
     },

packages/tailwind-config/tailwind.config.js

@@ -1,8 +1,132 @@
-module.exports = {
+/** @type {import('tailwindcss').Config} */
-    content: [
+export default {
-        // app content
+    darkMode: "class",
-        `src/**/*.{js,ts,jsx,tsx}`,
+    theme: {
-        // include packages if not transpiling
+        extend: {
-        // "../../packages/**/*.{js,ts,jsx,tsx}",
+            colors: {
-    ],
+                // UI
+                /***/ "dark-ui": "#202225",
+                /**/ "light-ui": "#FFFFFF",
+                /***/ "dark-ui-hover": "#3F3F46",
+                /**/ "light-ui-hover": "#EEEEEE",
+                /***/ "dark-ui-bg": "#36393F",
+                /**/ "light-ui-bg": "#F7F7F7",
+                /***/ "dark-ui-border": "#555",
+                /**/ "light-ui-border": "#CCC",
+
+                // text
+                /***/ "dark-text-default": "#EEEEEE",
+                /**/ "light-text-default": "#111111",
+                /***/ "dark-text-high-contrast": "#FFFFFF",
+                /**/ "light-text-high-contrast": "#000000",
+                /***/ "dark-text-gray": "#CCC",
+                /**/ "light-text-gray": "#555",
+
+                // anchor
+                /*********/ anchor: "#66AAFF",
+                /********/ "anchor-accent": "#4592F7",
+                /***/ "dark-anchor-header": "#778899",
+                /**/ "light-anchor-header": "#D3D3D3",
+
+                // card
+                /***/ "dark-card-bg": "#2F3136",
+                /**/ "light-card-bg": "#FFFFFF",
+                /***/ "dark-card-glow": "#FFFFFF33",
+                /**/ "light-card-glow": "#00000040",
+
+                // blockquote
+                /***/ "dark-blockquote-bg": "#FFFFFF12",
+                /**/ "light-blockquote-bg": "#0000000D",
+                /***/ "dark-blockquote-accent": "#FFFFFF4D",
+                /**/ "light-blockquote-accent": "#0000001A",
+
+                // inline code
+                /***/ "dark-inline-code-bg": "#444",
+                /**/ "light-inline-code-bg": "#EEE",
+                /***/ "dark-inline-code-text": "#FFFFFF",
+                /**/ "light-inline-code-text": "#000000",
+                /***/ "dark-inline-code-border": "#666",
+                /**/ "light-inline-code-border": "#BBB",
+
+                // block code
+                // light theme using: highlight.js/styles/default.css
+                // dark theme using: highlight.js/styles/atom-one-dark-reasonable.css
+                /***/ "dark-block-code-border": "#555",
+                /**/ "light-block-code-border": "#BBB",
+                /***/ "dark-block-code-highlight": "#14161A",
+                /**/ "light-block-code-highlight": "#DDDDDD",
+
+                // footer
+                /***/ "dark-footer-bg": "#000000",
+                /**/ "light-footer-bg": "#FFFFFF",
+                /***/ "dark-footer-text": "#808080",
+                /* */ "light-footer-text": "#808080",
+
+                // header
+                /***/ "dark-header-bg": "#202225",
+                /**/ "light-header-bg": "",
+                /***/ "dark-header-hover": "#3F3F46",
+                /**/ "light-header-hover": "",
+                /***/ "dark-header-text": "#D4D4D8",
+                /**/ "light-header-text": "",
+
+                // input
+                /***/ "dark-input-bg": "#36393F",
+                /**/ "light-input-bg": "#EEEEEE",
+                /***/ "dark-input-item-hover": "#202225",
+                /**/ "light-input-item-hover": "#FFFFFF",
+                /***/ "dark-input-border": "#555555",
+                /**/ "light-input-border": "#CCCCCC",
+                /***/ "dark-input-border-hover": "#808080",
+                /**/ "light-input-border-hover": "#808080",
+                /***/ "dark-input-border-focus": "#A3A3A3",
+                /**/ "light-input-border-focus": "#000000",
+                /***/ "dark-input-placeholder": "#A9A9A9",
+                /**/ "light-input-placeholder": "#777777",
+
+                // kbd
+                /***/ "dark-kbd-bg": "#000000",
+                /**/ "light-kbd-bg": "#F7F7F7",
+                /***/ "dark-kbd-text": "#FFFFFF",
+                /**/ "light-kbd-text": "#333333",
+                /***/ "dark-kbd-border": "#555555",
+                /**/ "light-kbd-border": "#CCCCCC",
+                /***/ "dark-kbd-outer-shadow": "#FFFFFF4D",
+                /**/ "light-kbd-outer-shadow": "#00000033",
+                /***/ "dark-kbd-inner-shadow": "#000000",
+                /**/ "light-kbd-inner-shadow": "#FFFFFF",
+
+                // mark
+                /***/ "dark-mark-bg": "#FFFF0080",
+                /**/ "light-mark-bg": "#FFFF00BF",
+                /***/ "dark-mark-text": "#FFFFFF",
+                /**/ "light-mark-text": "#000000",
+
+                // scrollbar
+                /***/ "dark-scrollbar-track": "#18181B",
+                /**/ "light-scrollbar-track": "#FFFFFF",
+                /***/ "dark-scrollbar-thumb": "#888888",
+                /**/ "light-scrollbar-thumb": "#DDDDDD",
+
+                // scroll progress
+                /***/ "dark-scroll-progress-bg": "#52525B",
+                /**/ "light-scroll-progress-bg": "#D4D4D8",
+                /***/ "dark-scroll-progress-fg": "#D4D4D8",
+                /**/ "light-scroll-progress-fg": "#52525B",
+
+                // table
+                /***/ "dark-table-border": "#777777",
+                /**/ "light-table-border": "#DDD",
+                /***/ "dark-table-alt": "#21272E",
+                /**/ "light-table-alt": "#F2F2F2",
+            },
+            fontFamily: {
+                "noto-sans": ['"Noto Sans KR"', "sans-serif"],
+                "source-code-pro": ['"Source Code Pro"', "monospace"],
+            },
+            boxShadow: {
+                glow: "0 0px 10px",
+            },
+        },
+    },
 }

pnpm-lock.yaml

@@ -174,6 +174,9 @@ importers:
 
   apps/main:
     devDependencies:
+      '@developomp-site/tailwind-config':
+        specifier: workspace:*
+        version: link:../../packages/tailwind-config
       '@developomp-site/theme':
         specifier: workspace:*
         version: link:../../packages/theme
@@ -216,6 +219,9 @@ importers:
       eslint-plugin-svelte:
         specifier: ^2.32.2
         version: 2.32.2(eslint@8.44.0)(svelte@4.0.1)
+      postcss:
+        specifier: ^8.4.24
+        version: 8.4.24
       prettier:
         specifier: ^2.8.8
         version: 2.8.8
@@ -231,6 +237,9 @@ importers:
       svelte-check:
         specifier: ^3.4.4
         version: 3.4.4(postcss@8.4.24)(sass@1.63.6)(svelte@4.0.1)
+      tailwindcss:
+        specifier: ^3.3.2
+        version: 3.3.2
       tslib:
         specifier: ^2.6.0
         version: 2.6.0
@@ -274,6 +283,9 @@ importers:
       '@developomp-site/blog-content':
         specifier: workspace:*
         version: link:../../packages/blog-content
+      '@developomp-site/tailwind-config':
+        specifier: workspace:*
+        version: link:../../packages/tailwind-config
       '@linaria/babel-preset':
         specifier: ^4.4.5
         version: 4.4.5
@@ -333,7 +345,7 @@ importers:
         version: 5.1.5
       vite:
         specifier: ^4.3.9
-        version: 4.3.9(@types/node@18.11.11)
+        version: 4.3.9(sass@1.63.6)
       vite-plugin-dynamic-import:
         specifier: ^1.4.1
         version: 1.4.1
@@ -4606,7 +4618,7 @@ packages:
       '@linaria/logger': 4.0.0
       '@linaria/utils': 4.3.4
       '@rollup/pluginutils': 4.2.1
-      vite: 4.3.9(@types/node@18.11.11)
+      vite: 4.3.9(sass@1.63.6)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -5963,7 +5975,7 @@ packages:
       '@babel/plugin-transform-react-jsx-self': 7.22.5(@babel/core@7.22.5)
       '@babel/plugin-transform-react-jsx-source': 7.22.5(@babel/core@7.22.5)
       react-refresh: 0.14.0
-      vite: 4.3.9(@types/node@18.11.11)
+      vite: 4.3.9(sass@1.63.6)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -10973,7 +10985,7 @@ packages:
     dependencies:
       universalify: 2.0.0
     optionalDependencies:
-      graceful-fs: 4.2.10
+      graceful-fs: 4.2.11
     dev: false
 
   /jsonpointer@5.0.1:
@@ -15350,7 +15362,7 @@ packages:
       debug: 4.3.4(supports-color@5.5.0)
       globrex: 0.1.2
       tsconfck: 2.1.1(typescript@5.1.5)
-      vite: 4.3.9(@types/node@18.11.11)
+      vite: 4.3.9(sass@1.63.6)
     transitivePeerDependencies:
       - supports-color
       - typescript