Skip to content

Add support for Tailwind CSS v4. #765

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jscarle wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Add support for Tailwind CSS v4. #765

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3183058
Added Tailwind CSS support.
jscarle Jun 18, 2025
f9b53d4
Updated tailwindcss templates.
jscarle Jun 18, 2025
ea3a7f2
postcss fix.
jscarle Jun 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Updated tailwindcss templates.
  • Loading branch information
@jscarle
jscarle committed Jun 18, 2025
commit f9b53d414ad46330be2ecffff758c85782dee20e
63 changes: 24 additions & 39 deletions template/code/tailwindcss-default/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,44 +4,29 @@ import TheWelcome from './components/TheWelcome.vue'
</script>

<template>
<header>
<img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

<div class="wrapper">
<HelloWorld msg="You did it!" />
<div
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"
>
<div
class="max-w-screen-xl mx-auto px-8 py-8 font-normal lg:flex lg:items-center lg:min-h-screen"
>
<header class="leading-6 lg:flex lg:items-center lg:pr-20">
<img
alt="Vue logo"
class="logo block mx-auto mb-8 lg:mx-0 lg:mr-8 lg:mb-0"
src="./assets/logo.svg"
width="125"
height="125"
/>

<div class="wrapper lg:flex lg:items-start lg:flex-wrap">
<HelloWorld msg="You did it!" />
</div>
</header>

<main class="lg:flex-1">
<TheWelcome />
</main>
</div>
</header>

<main>
<TheWelcome />
</main>
</div>
</template>

<style scoped>
header {
line-height: 1.5;
}

.logo {
display: block;
margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
header {
display: flex;
place-items: center;
padding-right: calc(var(--section-gap) / 2);
}

.logo {
margin: 0 2rem 0 0;
}

header .wrapper {
display: flex;
place-items: flex-start;
flex-wrap: wrap;
}
}
</style>
86 changes: 0 additions & 86 deletions template/code/tailwindcss-default/src/assets/base.css
View file
Open in desktop

This file was deleted.

32 changes: 5 additions & 27 deletions template/code/tailwindcss-default/src/assets/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,13 @@
@import './base.css';

#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
font-weight: normal;
}
@import "tailwindcss";

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

@media (hover: hover) {
a:hover {
background-color: hsla(160, 100%, 37%, 0.2);
}
}

@media (min-width: 1024px) {
body {
display: flex;
place-items: center;
}

#app {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0 2rem;
@apply bg-emerald-600/20;
}
}
}
33 changes: 4 additions & 29 deletions template/code/tailwindcss-default/src/components/HelloWorld.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,37 +8,12 @@ defineProps({
</script>

<template>
<div class="greetings">
<h1 class="green">{{ msg }}</h1>
<h3>
You’ve successfully created a project with
<div class="greetings text-center lg:text-left">
<h1 class="green font-medium text-5xl relative -top-2.5">{{ msg }}</h1>
<h3 class="text-xl">
You've successfully created a project with
<a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
</h3>
</div>
</template>

<style scoped>
h1 {
font-weight: 500;
font-size: 2.6rem;
position: relative;
top: -10px;
}

h3 {
font-size: 1.2rem;
}

.greetings h1,
.greetings h3 {
text-align: center;
}

@media (min-width: 1024px) {
.greetings h1,
.greetings h3 {
text-align: left;
}
}
</style>
2 changes: 1 addition & 1 deletion template/code/tailwindcss-default/src/components/TheWelcome.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
</template>
<template #heading>Documentation</template>

Vue’s
Vue's
<a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
provides you with all information you need to get started.
</WelcomeItem>
Expand Down
86 changes: 8 additions & 78 deletions template/code/tailwindcss-default/src/components/WelcomeItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,87 +1,17 @@
<template>
<div class="item">
<i>
<div
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"
>
<i
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"
>
<slot name="icon"></slot>
</i>
<div class="details">
<h3>
<div class="details flex-1 ml-4">
<h3 class="text-xl font-medium mb-2 text-slate-800 dark:text-white">
<slot name="heading"></slot>
</h3>
<slot></slot>
</div>
</div>
</template>

<style scoped>
.item {
margin-top: 2rem;
display: flex;
position: relative;
}

.details {
flex: 1;
margin-left: 1rem;
}

i {
display: flex;
place-items: center;
place-content: center;
width: 32px;
height: 32px;

color: var(--color-text);
}

h3 {
font-size: 1.2rem;
font-weight: 500;
margin-bottom: 0.4rem;
color: var(--color-heading);
}

@media (min-width: 1024px) {
.item {
margin-top: 0;
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
}

i {
top: calc(50% - 25px);
left: -26px;
position: absolute;
border: 1px solid var(--color-border);
background: var(--color-background);
border-radius: 8px;
width: 50px;
height: 50px;
}

.item:before {
content: ' ';
border-left: 1px solid var(--color-border);
position: absolute;
left: 0;
bottom: calc(50% + 25px);
height: calc(50% - 25px);
}

.item:after {
content: ' ';
border-left: 1px solid var(--color-border);
position: absolute;
left: 0;
top: calc(50% + 25px);
height: calc(50% - 25px);
}

.item:first-of-type:before {
display: none;
}

.item:last-of-type:after {
display: none;
}
}
</style>
Loading