feat(tailwind): migrate variables to Tailwind CSS configuration

.lintstagedrc.json

@@ -1,4 +1,4 @@
 {
 	"**/*.{md,mdx,html,astro,svelte,css}": ["pnpx prettier --write"],
-	"**/*.{js,ts,html,astro,svelte}": ["pnpx eslint --fix"]
+	"**/*.{js,ts,html,svelte}": ["pnpx eslint --fix"]
 }

src/components/Card.astro

@@ -1,63 +0,0 @@
----
-export interface Props {
-	title: string;
-	body: string;
-	href: string;
-}
-
-const { href, title, body } = Astro.props;
----
-
-<li class="link-card">
-	<a href={href}>
-		<h2>
-			{title}
-			<span>&rarr;</span>
-		</h2>
-		<p>
-			{body}
-		</p>
-	</a>
-</li>
-<style>
-	.link-card {
-		list-style: none;
-		display: flex;
-		padding: 0.25rem;
-		background-color: white;
-		background-image: none;
-		background-size: 400%;
-		border-radius: 0.6rem;
-		background-position: 100%;
-		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-	}
-
-	.link-card > a {
-		width: 100%;
-		text-decoration: none;
-		line-height: 1.4;
-		padding: 1rem 1.3rem;
-		border-radius: 0.35rem;
-		color: #111;
-		background-color: white;
-		opacity: 0.8;
-	}
-	h2 {
-		margin: 0;
-		font-size: 1.25rem;
-		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-	}
-	p {
-		margin-top: 0.5rem;
-		margin-bottom: 0;
-		color: #444;
-	}
-	.link-card:is(:hover, :focus-within) {
-		background-position: 0;
-		background-image: var(--accent-gradient);
-	}
-	.link-card:is(:hover, :focus-within) h2 {
-		color: rgb(var(--accent));
-	}
-</style>

src/layouts/Layout.astro

@@ -20,16 +20,8 @@ const { title } = Astro.props;
 	</body>
 </html>
 <style is:global>
-	:root {
-		--accent: 124, 58, 237;
-		--accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #da62c4 30%, white 60%);
-	}
 	html {
 		font-family: system-ui, sans-serif;
-		background-color: #F6F6F6;
-	}
-	code {
-		font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
-			Bitstream Vera Sans Mono, Courier New, monospace;
+		background-color: #f6f6f6;
 	}
 </style>

src/pages/index.astro

@@ -1,81 +1,14 @@
 ---
 import Layout from '../layouts/Layout.astro';
-import Card from '../components/Card.astro';
 ---
 
 <Layout title="Welcome to Astro.">
 	<main>
-		<h1>Welcome to <span class="text-gradient">Astro</span></h1>
-		<p class="instructions">
-			To get started, open the directory <code>src/pages</code> in your project.<br />
-			<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
+		<h1 class="text-5 font-black text-orange-700">Hello, world!</h1>
+		<p class="mb-4 text-sky-400">
+			Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium optio magni
+			asperiores fugiat, necessitatibus voluptatem sit quaerat pariatur natus, tempora
+			voluptatibus vero eveniet repudiandae, expedita libero. Cum cupiditate at placeat.
 		</p>
-		<ul role="list" class="link-card-grid">
-			<Card
-				href="https://docs.astro.build/"
-				title="Documentation"
-				body="Learn how Astro works and explore the official API docs."
-			/>
-			<Card
-				href="https://astro.build/integrations/"
-				title="Integrations"
-				body="Supercharge your project with new frameworks and libraries."
-			/>
-			<Card
-				href="https://astro.build/themes/"
-				title="Themes"
-				body="Explore a galaxy of community-built starter themes."
-			/>
-			<Card
-				href="https://astro.build/chat/"
-				title="Community"
-				body="Come say hi to our amazing Discord community. ❤️"
-			/>
-		</ul>
 	</main>
 </Layout>
-
-<style>
-	main {
-		margin: auto;
-		padding: 1.5rem;
-		max-width: 60ch;
-	}
-	h1 {
-		font-size: 3rem;
-		font-weight: 800;
-		margin: 0;
-	}
-	.text-gradient {
-		background-image: var(--accent-gradient);
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-size: 400%;
-		background-position: 0%;
-	}
-	.instructions {
-		line-height: 1.6;
-		margin: 1rem 0;
-		border: 1px solid rgba(var(--accent), 25%);
-		background-color: white;
-		padding: 1rem;
-		border-radius: 0.4rem;
-	}
-	.instructions code {
-		font-size: 0.875em;
-		font-weight: bold;
-		background: rgba(var(--accent), 12%);
-		color: rgb(var(--accent));
-		border-radius: 4px;
-		padding: 0.3em 0.45em;
-	}
-	.instructions strong {
-		color: rgb(var(--accent));
-	}
-	.link-card-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
-		gap: 1rem;
-		padding: 0;
-	}
-</style>

tailwind.config.cjs

@@ -2,7 +2,79 @@
 module.exports = {
 	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
 	theme: {
-		extend: {},
+		extend: {
+			screens: {
+				xs: '320px', // --phone
+				md: '768px', // --tablet
+				xl: '1280px', // --desktop (prev. 1200)
+				'3xl': '1800px', // --wide
+			},
+			gridTemplateColumns: {
+				10: 'repeat(10, minmax(0, 1fr))', // --grid-narrow
+				14: 'repeat(14, minmax(0, 1fr))', // --grid-wide
+				18: 'repeat(18, minmax(0, 1fr))', // --grid-fullsize
+			},
+			borderRadius: {
+				1: '2px', // --radius-1
+				2: '5px', // --radius-2
+				4: '8px', // --radius-4
+				25: '25px', // --radius-25
+				50: '50%', // --radius-50
+			},
+			borderWidth: {
+				1: '1px', // --border-width-1, (DEFAULT)
+				10: '0.1em', // --border-width-10
+				15: '0.15em', // --border-width-15
+			},
+			spacing: {
+				1: '0.335rem', // --space-1 (spacing-1.5)
+				2: 'clamp(0.335rem, 0.72vw, 0.402rem)', // --space-2
+				3: 'clamp(0.402rem, 0.86vw, 0.482rem)', // --space-3
+				4: 'clamp(0.482rem, 1.03vw, 0.579rem)', // --space-4
+				5: 'clamp(0.579rem, 1.24vw, 0.694rem)', // --space-5
+				6: 'clamp(0.694rem, 1.49vw, 0.833rem)', // --space-6
+				7: 'clamp(0.833rem, 1.78vw, 1rem)', // --space-7
+				8: 'clamp(1rem, 2.14vw, 1.2rem)', // --space-8
+				9: 'clamp(1.2rem, 2.57vw, 1.44rem)', // --space-9
+				10: 'clamp(1.44rem, 3.7vw, 1.728rem)', // --space-10
+				11: 'clamp(1.728rem, 3.7vw, 2.074rem)', // --space-11
+				12: 'clamp(2.074rem, 4.44vw, 2.488rem)', // --space-12
+				13: 'clamp(2.488rem, 5.32vw, 2.986rem)', // --space-13
+				14: 'clamp(2.986rem, 6.39vw, 3.583rem)', // --space-14
+				15: 'clamp(3.583rem, 7.67vw, 4.3rem)', // --space-15
+				16: 'clamp(4.3rem, 9.2vw, 5.16rem)', // --space-16
+				17: 'clamp(5.16rem, 11.04vw, 6.192rem)', // --space-17
+				18: 'clamp(6.192rem, 13.25vw, 7.43rem)', // --space-18
+				19: 'clamp(7.43rem, 15.9vw, 8.916rem)', // --space-19
+				20: 'clamp(8.916rem, 19.08vw, 10.699rem)', // --space-20
+				55: '5.55vw', // --space-55 TODO: new name, e.g. spacing-grid
+			},
+			fontFamily: {
+				sans: ['SecuelaVariable', 'Arial', 'sans-serif'], // --font-family-base
+				mono: ['Fira Code', 'Operator', 'Hasklig', 'Monoid', 'monospace'], // --font-family-mono
+			},
+			// TODO: Switch to Tshirt sizes
+			fontSize: {
+				1: ['0.65em', { lineHeight: ' ' }], // --font-size-1 (0)
+				2: ['clamp(0.65rem, 0.8vw, 0.75rem)', { lineHeight: '1.625' }], // --font-size-2 (2)
+				3: ['clamp(1rem, 1.1vw, 1.25rem)', { lineHeight: '1.625' }], // --font-size-3 (15)
+				4: ['clamp(1.25rem, 1.8vw, 2rem)', { lineHeight: '1' }], // --font-size-4 (5)
+				5: ['clamp(1.5rem, 2.9vw, 3.25rem)', { lineHeight: '1' }], // --font-size-5 (1)
+				6: ['clamp(2.25rem, 4.7vw, 5.3rem)', { lineHeight: '1' }], // --font-size-6 (1)
+				7: ['clamp(3.3rem, 7.3vw, 8.5rem)', { lineHeight: '1' }], // --font-size-7 (1)
+				8: ['clamp(4.5rem, 12.2vw, 13.87rem)', { lineHeight: '1' }], // --font-size-8 (0)
+				9: ['clamp(5.5rem, 28.7vw, 22.43rem)', { lineHeight: '1' }], // --font-size-9 (1)
+			},
+			// TODO: Text Shadow?
+			boxShadow: {
+				subtle: '0 0 50px rgb(0 0 0 / 0.2)', // --shadow-subtle-shade
+				beveled: '0 1px 0 rgb(0 0 0 / 0.2), inset 0 0 0 2px #ffffff', // --shadow-beveled-keyboard
+				darkInset: 'inset 0 0 0 1px rgb(0 0 0 / 0.2)', // --shadow-dark-inset
+			},
+			dropShadow: {
+				subtle: 'inset 0 0 5px rgb(0 0 0 / 0.15)', // --shadow-dark-inset
+			},
+		},
 	},
 	plugins: [],
-}
+};