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 f9b53d4

Browse files
committed
Updated tailwindcss templates.
1 parent 3183058 commit f9b53d4

File tree

26 files changed

+210
-1121
lines changed

26 files changed

+210
-1121
lines changed

‎template/code/tailwindcss-default/src/App.vue

Lines changed: 24 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -4,44 +4,29 @@ import TheWelcome from './components/TheWelcome.vue'
44
</script>
55

66
<template>
7-
<header>
8-
<img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
9-
10-
<div class="wrapper">
11-
<HelloWorld msg="You did it!" />
7+
<div
8+
class="min-h-screen bg-white dark:bg-gray-900 text-slate-800 dark:text-gray-200 transition-colors duration-500 font-sans text-sm leading-relaxed antialiased"
9+
>
10+
<div
11+
class="max-w-screen-xl mx-auto px-8 py-8 font-normal lg:flex lg:items-center lg:min-h-screen"
12+
>
13+
<header class="leading-6 lg:flex lg:items-center lg:pr-20">
14+
<img
15+
alt="Vue logo"
16+
class="logo block mx-auto mb-8 lg:mx-0 lg:mr-8 lg:mb-0"
17+
src="./assets/logo.svg"
18+
width="125"
19+
height="125"
20+
/>
21+
22+
<div class="wrapper lg:flex lg:items-start lg:flex-wrap">
23+
<HelloWorld msg="You did it!" />
24+
</div>
25+
</header>
26+
27+
<main class="lg:flex-1">
28+
<TheWelcome />
29+
</main>
1230
</div>
13-
</header>
14-
15-
<main>
16-
<TheWelcome />
17-
</main>
31+
</div>
1832
</template>
19-
20-
<style scoped>
21-
header {
22-
line-height: 1.5;
23-
}
24-
25-
.logo {
26-
display: block;
27-
margin: 0 auto 2rem;
28-
}
29-
30-
@media (min-width: 1024px) {
31-
header {
32-
display: flex;
33-
place-items: center;
34-
padding-right: calc(var(--section-gap) / 2);
35-
}
36-
37-
.logo {
38-
margin: 0 2rem 0 0;
39-
}
40-
41-
header .wrapper {
42-
display: flex;
43-
place-items: flex-start;
44-
flex-wrap: wrap;
45-
}
46-
}
47-
</style>

‎template/code/tailwindcss-default/src/assets/base.css

Lines changed: 0 additions & 86 deletions
This file was deleted.
Lines changed: 5 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,13 @@
1-
@import './base.css';
2-
3-
#app {
4-
max-width: 1280px;
5-
margin: 0 auto;
6-
padding: 2rem;
7-
font-weight: normal;
8-
}
1+
@import "tailwindcss";
92

3+
/* Custom styles that complement Tailwind */
104
a,
115
.green {
12-
text-decoration: none;
13-
color: hsla(160, 100%, 37%, 1);
14-
transition: 0.4s;
15-
padding: 3px;
6+
@apply text-emerald-600 no-underline transition-all duration-400 px-1 py-0.5;
167
}
178

189
@media (hover: hover) {
1910
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;
11+
@apply bg-emerald-600/20;
3412
}
35-
}
13+
}

‎template/code/tailwindcss-default/src/components/HelloWorld.vue

Lines changed: 4 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -8,37 +8,12 @@ defineProps({
88
</script>
99

1010
<template>
11-
<div class="greetings">
12-
<h1 class="green">{{ msg }}</h1>
13-
<h3>
14-
You’ve successfully created a project with
11+
<div class="greetings text-center lg:text-left">
12+
<h1 class="green font-medium text-5xl relative -top-2.5">{{ msg }}</h1>
13+
<h3class="text-xl">
14+
You've successfully created a project with
1515
<a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
1616
<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
1717
</h3>
1818
</div>
1919
</template>
20-
21-
<style scoped>
22-
h1 {
23-
font-weight: 500;
24-
font-size: 2.6rem;
25-
position: relative;
26-
top: -10px;
27-
}
28-
29-
h3 {
30-
font-size: 1.2rem;
31-
}
32-
33-
.greetings h1,
34-
.greetings h3 {
35-
text-align: center;
36-
}
37-
38-
@media (min-width: 1024px) {
39-
.greetings h1,
40-
.greetings h3 {
41-
text-align: left;
42-
}
43-
}
44-
</style>

‎template/code/tailwindcss-default/src/components/TheWelcome.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
1616
</template>
1717
<template #heading>Documentation</template>
1818

19-
Vue’s
19+
Vue's
2020
<a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
2121
provides you with all information you need to get started.
2222
</WelcomeItem>
Lines changed: 8 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,17 @@
11
<template>
2-
<div class="item">
3-
<i>
2+
<div
3+
class="item mt-8 flex relative lg:mt-0 lg:py-2 lg:pl-20 lg:pb-4 before:lg:content-[''] before:lg:border-l before:lg:border-gray-300 before:lg:dark:border-gray-600 before:lg:absolute before:lg:left-0 before:lg:bottom-[calc(50%+25px)] before:lg:h-[calc(50%-25px)] after:lg:content-[''] after:lg:border-l after:lg:border-gray-300 after:lg:dark:border-gray-600 after:lg:absolute after:lg:left-0 after:lg:top-[calc(50%+25px)] after:lg:h-[calc(50%-25px)] first:before:lg:hidden last:after:lg:hidden"
4+
>
5+
<i
6+
class="flex items-center justify-center w-8 h-8 text-slate-800 dark:text-gray-200 lg:absolute lg:top-[calc(50%-25px)] lg:left-[-26px] lg:border lg:border-gray-300 lg:dark:border-gray-600 lg:bg-white lg:dark:bg-gray-900 lg:rounded-lg lg:w-12 lg:h-12"
7+
>
48
<slot name="icon"></slot>
59
</i>
6-
<div class="details">
7-
<h3>
10+
<div class="details flex-1 ml-4">
11+
<h3class="text-xl font-medium mb-2 text-slate-800 dark:text-white">
812
<slot name="heading"></slot>
913
</h3>
1014
<slot></slot>
1115
</div>
1216
</div>
1317
</template>
14-
15-
<style scoped>
16-
.item {
17-
margin-top: 2rem;
18-
display: flex;
19-
position: relative;
20-
}
21-
22-
.details {
23-
flex: 1;
24-
margin-left: 1rem;
25-
}
26-
27-
i {
28-
display: flex;
29-
place-items: center;
30-
place-content: center;
31-
width: 32px;
32-
height: 32px;
33-
34-
color: var(--color-text);
35-
}
36-
37-
h3 {
38-
font-size: 1.2rem;
39-
font-weight: 500;
40-
margin-bottom: 0.4rem;
41-
color: var(--color-heading);
42-
}
43-
44-
@media (min-width: 1024px) {
45-
.item {
46-
margin-top: 0;
47-
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
48-
}
49-
50-
i {
51-
top: calc(50% - 25px);
52-
left: -26px;
53-
position: absolute;
54-
border: 1px solid var(--color-border);
55-
background: var(--color-background);
56-
border-radius: 8px;
57-
width: 50px;
58-
height: 50px;
59-
}
60-
61-
.item:before {
62-
content: ' ';
63-
border-left: 1px solid var(--color-border);
64-
position: absolute;
65-
left: 0;
66-
bottom: calc(50% + 25px);
67-
height: calc(50% - 25px);
68-
}
69-
70-
.item:after {
71-
content: ' ';
72-
border-left: 1px solid var(--color-border);
73-
position: absolute;
74-
left: 0;
75-
top: calc(50% + 25px);
76-
height: calc(50% - 25px);
77-
}
78-
79-
.item:first-of-type:before {
80-
display: none;
81-
}
82-
83-
.item:last-of-type:after {
84-
display: none;
85-
}
86-
}
87-
</style>

0 commit comments

Comments
(0)

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