From 002fb4bea7361cb14a5928e465d46d8c3c40ff17 Mon Sep 17 00:00:00 2001 From: developomp Date: Sun, 2 Jul 2023 10:56:12 +0900 Subject: [PATCH] refactor: tidy up tailwind configs - add tailwind to all apps - share tailwind themes and stuff --- apps/main/package.json | 3 + apps/main/postcss.config.js | 6 + apps/main/src/app.css | 4 + apps/main/tailwind.config.js | 5 + apps/portfolio/.eslintrc | 1 + apps/portfolio/package.json | 1 + apps/portfolio/tailwind.config.js | 130 +----------------- packages/tailwind-config/package.json | 5 +- packages/tailwind-config/tailwind.config.js | 138 +++++++++++++++++++- pnpm-lock.yaml | 22 +++- 10 files changed, 173 insertions(+), 142 deletions(-) create mode 100644 apps/main/postcss.config.js create mode 100644 apps/main/tailwind.config.js diff --git a/apps/main/package.json b/apps/main/package.json index 689ac68..5de7d94 100644 --- a/apps/main/package.json +++ b/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" diff --git a/apps/main/postcss.config.js b/apps/main/postcss.config.js new file mode 100644 index 0000000..d41ad63 --- /dev/null +++ b/apps/main/postcss.config.js @@ -0,0 +1,6 @@ +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/apps/main/src/app.css b/apps/main/src/app.css index 19c150f..5aeda78 100644 --- a/apps/main/src/app.css +++ b/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; diff --git a/apps/main/tailwind.config.js b/apps/main/tailwind.config.js new file mode 100644 index 0000000..cb87a90 --- /dev/null +++ b/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}"], +} diff --git a/apps/portfolio/.eslintrc b/apps/portfolio/.eslintrc index d0d1700..71676a8 100644 --- a/apps/portfolio/.eslintrc +++ b/apps/portfolio/.eslintrc @@ -2,6 +2,7 @@ "root": true, "env": { "browser": true, + "node": true, "es2020": true }, "parserOptions": { diff --git a/apps/portfolio/package.json b/apps/portfolio/package.json index ac89b81..429446a 100644 --- a/apps/portfolio/package.json +++ b/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", diff --git a/apps/portfolio/tailwind.config.js b/apps/portfolio/tailwind.config.js index b42180a..d2deaf9 100644 --- a/apps/portfolio/tailwind.config.js +++ b/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: [], } diff --git a/packages/tailwind-config/package.json b/packages/tailwind-config/package.json index 646e995..08bff0c 100644 --- a/packages/tailwind-config/package.json +++ b/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" }, diff --git a/packages/tailwind-config/tailwind.config.js b/packages/tailwind-config/tailwind.config.js index 541d5a0..5b67d85 100644 --- a/packages/tailwind-config/tailwind.config.js +++ b/packages/tailwind-config/tailwind.config.js @@ -1,8 +1,132 @@ -module.exports = { - content: [ - // app content - `src/**/*.{js,ts,jsx,tsx}`, - // include packages if not transpiling - // "../../packages/**/*.{js,ts,jsx,tsx}", - ], +/** @type {import('tailwindcss').Config} */ +export default { + darkMode: "class", + 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", + }, + }, + }, } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b0d42f9..c4a7805 100644 --- a/pnpm-lock.yaml +++ b/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