Skip to content

Commit 5fb32ee

Browse files
jimmzzzjimmzzz
committed
feat: Inject css styles into config viewer <head>
1 parent 56d6d2e commit 5fb32ee

File tree

5 files changed

+85
-1
lines changed

5 files changed

+85
-1
lines changed

‎README.md‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ The `serve` command is the default command. Running `tailwind-config-viewer` is
4242
|-p, --port|`3000`|The port to run the viewer on. If occupied it will use next available port.|
4343
|-o, --open|`false`|Open the viewer in default browser|
4444
|-c, --config|`tailwind.config.js`|Path to your Tailwind config file|
45+
|--css|`style.css`| Path to your stylesheet file (CSS). Inject CSS to head element of config viewer. This is handy for defining CSS variables|
4546

4647
### export
4748

@@ -104,6 +105,67 @@ module.exports = {
104105

105106
You can replace any value in your theme for display in the config viewer by setting the corresponding `valueToFind: valueToReplace` in the `themeReplacements` object.
106107

108+
### CSS inject
109+
110+
You can inject CSS file to head of the config viewer. This is useful when you got defined your properties in config as CSS variables, also useful for importing fonts.
111+
112+
For defining variables in dark mode use class name `mode-dark`
113+
114+
```js
115+
module.exports = {
116+
theme: {
117+
colors: {
118+
'blue-50': 'var(--color-blue-50)',
119+
'blue-100': 'var(--color-blue-100)',
120+
'blue-200': 'var(--color-blue-200)',
121+
'blue-300': 'var(--color-blue-300)',
122+
'blue-400': 'var(--color-blue-400)',
123+
'blue-500': 'var(--color-blue-500)',
124+
'blue-600': 'var(--color-blue-600)',
125+
'blue-700': 'var(--color-blue-700)',
126+
'blue-800': 'var(--color-blue-800)',
127+
'blue-900': 'var(--color-blue-900)',
128+
'blue-950': 'var(--color-blue-950)',
129+
},
130+
}
131+
}
132+
```
133+
134+
style.css example
135+
136+
```css
137+
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Fustat:wght@200..800&display=swap');
138+
139+
:root {
140+
--color-blue-50: #f0f9ff;
141+
--color-blue-100: #e0f2fe;
142+
--color-blue-200: #bae6fd;
143+
--color-blue-300: #7dd3fc;
144+
--color-blue-400: #38bdf8;
145+
--color-blue-500: #0ea5e9;
146+
--color-blue-600: #0284c7;
147+
--color-blue-700: #0369a1;
148+
--color-blue-800: #075985;
149+
--color-blue-900: #0c4a6e;
150+
--color-blue-950: #ffffff;
151+
}
152+
153+
// you can define different values for same variable in dark mode
154+
.mode-dark {
155+
--color-blue-50: #f0f9ff;
156+
--color-blue-100: #dbeafe;
157+
--color-blue-200: #bfdbfe;
158+
--color-blue-300: #93c5fd;
159+
--color-blue-400: #60a5fa;
160+
--color-blue-500: #3b82f6;
161+
--color-blue-600: #2563eb;
162+
--color-blue-700: #0369a1;
163+
--color-blue-800: #1d4ed8;
164+
--color-blue-900: #1e40af;
165+
--color-blue-950: #1e3a8a;
166+
}
167+
```
168+
107169
### baseFontSize
108170

109171
The config viewer displays the pixel equivalent of any rem values. By default `baseFontSize` is set to 16 to mirror the default root element font size in most browsers. If you plan on using a different root font size in your project, you should set the value of `baseFontSize` to match.

‎cli/index.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
#!/usr/bin/env node
22
const { pathToFileURL } = require('url')
33
const { resolveConfigPath } = require('../lib/tailwindConfigUtils')
4+
const { readFile, access, constants } = require('fs/promises')
45
const program = require('commander')
6+
57
program
68
.option('-c, --config <path>', 'Path to your Tailwind config file', './tailwind.config.js')
9+
.option('--css <path>', 'Path to your CSS style file', './style.css')
710

811
program
912
.command('serve', { isDefault: true })
@@ -20,6 +23,15 @@ program
2023
const config = await import(configHref)
2124
return config.default || config
2225
},
26+
cssProvider: async () => {
27+
const filePath = program.css
28+
29+
try {
30+
await access(filePath, constants.F_OK)
31+
const styles = await readFile(filePath, 'utf-8')
32+
return styles
33+
} catch (err) {}
34+
},
2335
shouldOpen: args.open
2436
}).start()
2537
})

‎public/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99
<title>tailwind-config-viewer</title>
1010
<script>
1111
window.__TCV_CONFIG = {
12-
configPath: './config.json'
12+
configPath: './config.json',
13+
cssPath: './style.css'
1314
}
1415
</script>
1516
</head>

‎server/index.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ const { resolveConfig } = require('../lib/tailwindConfigUtils')
88
function createServer ({
99
port = 3000,
1010
tailwindConfigProvider,
11+
cssProvider,
1112
shouldOpen,
1213
routerPrefix = ''
1314
}) {
@@ -20,6 +21,12 @@ function createServer ({
2021
ctx.body = resolveConfig(config)
2122
})
2223

24+
router.get('/style.css', async (ctx) => {
25+
const stylesToInject = await cssProvider()
26+
ctx.type = 'text/css'
27+
ctx.body = stylesToInject
28+
})
29+
2330
app
2431
.use(serve(`${__dirname}/../dist`))
2532
.use(router.routes())

‎src/App.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,8 @@ export default {
4242
</script>
4343

4444
<style>
45+
@import url('/style.css');
46+
4547
body {
4648
@apply bg-white;
4749
}

0 commit comments

Comments
 (0)