Movatterモバイル変換

[0]ホーム
URL:

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

Commitf9b53d4

Browse files
committed
Updated tailwindcss templates.
1 parent3183058 commitf9b53d4

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-
<imgalt="Vue logo"class="logo"src="./assets/logo.svg"width="125"height="125" />
9-
10-
<divclass="wrapper">
11-
<HelloWorldmsg="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+
<headerclass="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+
<divclass="wrapper lg:flex lg:items-start lg:flex-wrap">
23+
<HelloWorldmsg="You did it!" />
24+
</div>
25+
</header>
26+
27+
<mainclass="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:0auto2rem;
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:02rem00;
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:1fr1fr;
33-
padding:02rem;
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-
<divclass="greetings">
12-
<h1class="green">{{ msg }}</h1>
13-
<h3>
14-
You’ve successfully created a project with
11+
<divclass="greetings text-center lg:text-left">
12+
<h1class="green font-medium text-5xl relative -top-2.5">{{ msg }}</h1>
13+
<h3class="text-xl">
14+
You've successfully created a project with
1515
<ahref="https://vite.dev/"target="_blank"rel="noopener">Vite</a> +
1616
<ahref="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-
.greetingsh1,
34-
.greetingsh3 {
35-
text-align:center;
36-
}
37-
38-
@media (min-width:1024px) {
39-
.greetingsh1,
40-
.greetingsh3 {
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
<ahref="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-
<divclass="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
<slotname="icon"></slot>
59
</i>
6-
<divclass="details">
7-
<h3>
10+
<divclass="details flex-1 ml-4">
11+
<h3class="text-xl font-medium mb-2 text-slate-800 dark:text-white">
812
<slotname="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.4rem01remcalc(var(--section-gap)/2);
48-
}
49-
50-
i {
51-
top:calc(50%-25px);
52-
left:-26px;
53-
position:absolute;
54-
border:1pxsolidvar(--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:1pxsolidvar(--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:1pxsolidvar(--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)
[8]ページ先頭
©2009-2025 Movatter.jp