Skip to content

Commit 1c1d2f2

Browse files
committed
setup tailwind
1 parent a49ef61 commit 1c1d2f2

File tree

10 files changed

+922
-98
lines changed

10 files changed

+922
-98
lines changed

sandbox/index.html

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,12 @@
66
<title>@bedard/tailwindcss-dialogs</title>
77
</head>
88
<body>
9-
<div id="app"></div>
9+
<div class="bg-gray-50 h-screen overflow-hidden relative">
10+
<img class="absolute top-1/2 left-1/2 max-w-none -translate-x-1/2 -translate-y-1/2" src="/beams.jpg" width="1308" />
11+
12+
<div class="absolute inset-0 bg-[url(/grid.svg)] bg-center [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))]"></div>
13+
</div>
14+
1015
<script type="module" src="/src/main.ts"></script>
1116
</body>
1217
</html>

sandbox/package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@
99
"preview": "vite preview"
1010
},
1111
"devDependencies": {
12+
"autoprefixer": "^10.4.19",
13+
"postcss": "^8.4.39",
14+
"tailwindcss": "^3.4.4",
1215
"typescript": "^5.2.2",
1316
"vite": "^5.3.1"
1417
}

sandbox/pnpm-lock.yaml

Lines changed: 874 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

sandbox/postcss.config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

sandbox/public/beams.jpg

27.7 KB
Loading

sandbox/public/grid.svg

Lines changed: 4 additions & 0 deletions
Loading

sandbox/src/main.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
console.log('Soon...')
1+
import './style.css'
2+
3+
console.log('ok...')

sandbox/src/style.css

Lines changed: 3 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,3 @@
1-
:root {
2-
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3-
line-height: 1.5;
4-
font-weight: 400;
5-
6-
color-scheme: light dark;
7-
color: rgba(255, 255, 255, 0.87);
8-
background-color: #242424;
9-
10-
font-synthesis: none;
11-
text-rendering: optimizeLegibility;
12-
-webkit-font-smoothing: antialiased;
13-
-moz-osx-font-smoothing: grayscale;
14-
}
15-
16-
a {
17-
font-weight: 500;
18-
color: #646cff;
19-
text-decoration: inherit;
20-
}
21-
a:hover {
22-
color: #535bf2;
23-
}
24-
25-
body {
26-
margin: 0;
27-
display: flex;
28-
place-items: center;
29-
min-width: 320px;
30-
min-height: 100vh;
31-
}
32-
33-
h1 {
34-
font-size: 3.2em;
35-
line-height: 1.1;
36-
}
37-
38-
#app {
39-
max-width: 1280px;
40-
margin: 0 auto;
41-
padding: 2rem;
42-
text-align: center;
43-
}
44-
45-
.logo {
46-
height: 6em;
47-
padding: 1.5em;
48-
will-change: filter;
49-
transition: filter 300ms;
50-
}
51-
.logo:hover {
52-
filter: drop-shadow(0 0 2em #646cffaa);
53-
}
54-
.logo.vanilla:hover {
55-
filter: drop-shadow(0 0 2em #3178c6aa);
56-
}
57-
58-
.card {
59-
padding: 2em;
60-
}
61-
62-
.read-the-docs {
63-
color: #888;
64-
}
65-
66-
button {
67-
border-radius: 8px;
68-
border: 1px solid transparent;
69-
padding: 0.6em 1.2em;
70-
font-size: 1em;
71-
font-weight: 500;
72-
font-family: inherit;
73-
background-color: #1a1a1a;
74-
cursor: pointer;
75-
transition: border-color 0.25s;
76-
}
77-
button:hover {
78-
border-color: #646cff;
79-
}
80-
button:focus,
81-
button:focus-visible {
82-
outline: 4px auto -webkit-focus-ring-color;
83-
}
84-
85-
@media (prefers-color-scheme: light) {
86-
:root {
87-
color: #213547;
88-
background-color: #ffffff;
89-
}
90-
a:hover {
91-
color: #747bff;
92-
}
93-
button {
94-
background-color: #f9f9f9;
95-
}
96-
}
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

sandbox/tailwind.config.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/** @type {import('tailwindcss').Config} */
2+
export default {
3+
content: [
4+
"./index.html",
5+
"./src/**/*.{js,ts,jsx,tsx}",
6+
],
7+
theme: {
8+
extend: {},
9+
},
10+
plugins: [],
11+
}
12+

sandbox/tailwindcss.config.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/** @type {import('tailwindcss').Config} */
2+
export default {
3+
content: [
4+
"./index.html",
5+
"./src/**/*.{js,ts,jsx,tsx}",
6+
],
7+
theme: {
8+
extend: {},
9+
},
10+
plugins: [],
11+
}

0 commit comments

Comments
 (0)