Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 3183058

Browse files
committed
Added Tailwind CSS support.
1 parent c7914f1 commit 3183058

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

67 files changed

+2339
-0
lines changed

‎index.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ const FEATURE_FLAGS = [
2727
'default',
2828
'ts',
2929
'typescript',
30+
'tailwindcss',
3031
'jsx',
3132
'router',
3233
'vue-router',
@@ -49,6 +50,10 @@ const FEATURE_OPTIONS = [
4950
value: 'typescript',
5051
label: language.needsTypeScript.message,
5152
},
53+
{
54+
value: 'tailwindcss',
55+
label: language.needsTailwindCss.message,
56+
},
5257
{
5358
value: 'jsx',
5459
label: language.needsJsx.message,
@@ -170,6 +175,8 @@ Available feature flags:
170175
Create a project with the default configuration without any additional features.
171176
--ts, --typescript
172177
Add TypeScript support.
178+
--tailwindcss
179+
Add Tailwind CSS support.
173180
--jsx
174181
Add JSX support.
175182
--router, --vue-router
@@ -350,6 +357,7 @@ async function init() {
350357
const { features, experimentFeatures } = result
351358

352359
const needsTypeScript = argv.ts || argv.typescript || features.includes('typescript')
360+
const needsTailwindCss = argv.tailwindcss || features.includes('tailwindcss')
353361
const needsJsx = argv.jsx || features.includes('jsx')
354362
const needsRouter = argv.router || argv['vue-router'] || features.includes('router')
355363
const needsPinia = argv.pinia || features.includes('pinia')
@@ -400,6 +408,9 @@ async function init() {
400408
if (needsJsx) {
401409
render('config/jsx')
402410
}
411+
if (needsTailwindCss) {
412+
render('config/tailwindcss')
413+
}
403414
if (needsRouter) {
404415
render('config/router')
405416
}
@@ -519,6 +530,7 @@ async function init() {
519530
// Render code template.
520531
// prettier-ignore
521532
const codeTemplate =
533+
(needsTailwindCss ? 'tailwindcss-' : '') +
522534
(needsTypeScript ? 'typescript-' : '') +
523535
(needsRouter ? 'router' : 'default')
524536
render(`code/${codeTemplate}`)

‎locales/en-US.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@
2121
"needsTypeScript": {
2222
"message": "TypeScript"
2323
},
24+
"needsTailwindCss": {
25+
"message": "Tailwind CSS"
26+
},
2427
"needsJsx": {
2528
"message": "JSX Support"
2629
},

‎locales/fr-FR.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@
2121
"needsTypeScript": {
2222
"message": "TypeScript"
2323
},
24+
"needsTailwindCss": {
25+
"message": "Tailwind CSS"
26+
},
2427
"needsJsx": {
2528
"message": "Support de JSX"
2629
},

‎locales/tr-TR.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@
2121
"needsTypeScript": {
2222
"message": "TypeScript"
2323
},
24+
"needsTailwindCss": {
25+
"message": "Tailwind CSS"
26+
},
2427
"needsJsx": {
2528
"message": "JSX Desteği"
2629
},

‎locales/zh-Hans.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@
2121
"needsTypeScript": {
2222
"message": "TypeScript"
2323
},
24+
"needsTailwindCss": {
25+
"message": "Tailwind CSS"
26+
},
2427
"needsJsx": {
2528
"message": "JSX 支持"
2629
},

‎locales/zh-Hant.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@
2121
"needsTypeScript": {
2222
"message": "TypeScript"
2323
},
24+
"needsTailwindCss": {
25+
"message": "Tailwind CSS"
26+
},
2427
"needsJsx": {
2528
"message": "JSX 支援"
2629
},
Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
/* color palette from <https://github.com/vuejs/theme> */
2+
:root {
3+
--vt-c-white: #ffffff;
4+
--vt-c-white-soft: #f8f8f8;
5+
--vt-c-white-mute: #f2f2f2;
6+
7+
--vt-c-black: #181818;
8+
--vt-c-black-soft: #222222;
9+
--vt-c-black-mute: #282828;
10+
11+
--vt-c-indigo: #2c3e50;
12+
13+
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
14+
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
15+
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
16+
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
17+
18+
--vt-c-text-light-1: var(--vt-c-indigo);
19+
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
20+
--vt-c-text-dark-1: var(--vt-c-white);
21+
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
22+
}
23+
24+
/* semantic color variables for this project */
25+
:root {
26+
--color-background: var(--vt-c-white);
27+
--color-background-soft: var(--vt-c-white-soft);
28+
--color-background-mute: var(--vt-c-white-mute);
29+
30+
--color-border: var(--vt-c-divider-light-2);
31+
--color-border-hover: var(--vt-c-divider-light-1);
32+
33+
--color-heading: var(--vt-c-text-light-1);
34+
--color-text: var(--vt-c-text-light-1);
35+
36+
--section-gap: 160px;
37+
}
38+
39+
@media (prefers-color-scheme: dark) {
40+
:root {
41+
--color-background: var(--vt-c-black);
42+
--color-background-soft: var(--vt-c-black-soft);
43+
--color-background-mute: var(--vt-c-black-mute);
44+
45+
--color-border: var(--vt-c-divider-dark-2);
46+
--color-border-hover: var(--vt-c-divider-dark-1);
47+
48+
--color-heading: var(--vt-c-text-dark-1);
49+
--color-text: var(--vt-c-text-dark-2);
50+
}
51+
}
52+
53+
*,
54+
*::before,
55+
*::after {
56+
box-sizing: border-box;
57+
margin: 0;
58+
font-weight: normal;
59+
}
60+
61+
body {
62+
min-height: 100vh;
63+
color: var(--color-text);
64+
background: var(--color-background);
65+
transition:
66+
color 0.5s,
67+
background-color 0.5s;
68+
line-height: 1.6;
69+
font-family:
70+
Inter,
71+
-apple-system,
72+
BlinkMacSystemFont,
73+
'Segoe UI',
74+
Roboto,
75+
Oxygen,
76+
Ubuntu,
77+
Cantarell,
78+
'Fira Sans',
79+
'Droid Sans',
80+
'Helvetica Neue',
81+
sans-serif;
82+
font-size: 15px;
83+
text-rendering: optimizeLegibility;
84+
-webkit-font-smoothing: antialiased;
85+
-moz-osx-font-smoothing: grayscale;
86+
}
Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
@import './base.css';
2+
3+
#app {
4+
max-width: 1280px;
5+
margin: 0 auto;
6+
padding: 2rem;
7+
font-weight: normal;
8+
}
9+
10+
a,
11+
.green {
12+
text-decoration: none;
13+
color: hsla(160, 100%, 37%, 1);
14+
transition: 0.4s;
15+
padding: 3px;
16+
}
17+
18+
@media (hover: hover) {
19+
a:hover {
20+
background-color: hsla(160, 100%, 37%, 0.2);
21+
}
22+
}
23+
24+
@media (min-width: 1024px) {
25+
body {
26+
display: flex;
27+
place-items: center;
28+
}
29+
30+
#app {
31+
display: grid;
32+
grid-template-columns: 1fr 1fr;
33+
padding: 0 2rem;
34+
}
35+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /