Pascal/weedmap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add tailwind

Browse Source
This commit is contained in:
Pascal
2024-02-23 21:48:05 +01:00
parent 3d21517c3b
commit 3aab8d4425
7 changed files with 1473 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1
View File
@@ -7,6 +7,7 @@
<title>Vite + TS</title> <title>Vite + TS</title>
</head> </head>
<body> <body>
<p class="text-3xl font-bold underline">aaa</p>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
package-lock.json
Generated
+1451
View File
File diff suppressed because it is too large Load Diff
package.json
+3
View File
@@ -11,7 +11,10 @@
"check": "prettier --check ." "check": "prettier --check ."
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "^10.4.17",
"postcss": "^8.4.35",
"prettier": "^3.2.5", "prettier": "^3.2.5",
"tailwindcss": "^3.4.1",
"typescript": "^5.0.2", "typescript": "^5.0.2",
"vite": "^4.4.5" "vite": "^4.4.5"
} }
postcss.config.js
+6
View File
@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
src/main.ts
+1 -1
View File
@@ -11,7 +11,7 @@ document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
<a href="https://www.typescriptlang.org/" target="_blank"> <a href="https://www.typescriptlang.org/" target="_blank">
<img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" /> <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
</a> </a>
<h1>Vite + TypeScript</h1> <h1 class="text-3xl font-bold underline">Vite + TypeScript</h1>
<div class="card"> <div class="card">
<button id="counter" type="button"></button> <button id="counter" type="button"></button>
</div> </div>
src/style.css
+3 -97
View File
@@ -1,97 +1,3 @@
:root { @tailwind base;
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; @tailwind components;
line-height: 1.5; @tailwind utilities;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vanilla:hover {
filter: drop-shadow(0 0 2em #3178c6aa);
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
tailwind.config.js
+8
View File
@@ -0,0 +1,8 @@
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {}
},
plugins: []
};