Skip to content

Commit cdc1099

Browse files
timlrxtimlrx
authored
Merge pull request #1111 from timlrx/tailwind-v4
Tailwind v4
2 parents d00edcb + 2002c6d commit cdc1099

27 files changed

+1326
-1302
lines changed

‎app/Main.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ export default function Home({ posts }) {
1010
return (
1111
<>
1212
<div className="divide-y divide-gray-200 dark:divide-gray-700">
13-
<div className="space-y-2 pb-8 pt-6 md:space-y-5">
14-
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
13+
<div className="space-y-2 pt-6 pb-8 md:space-y-5">
14+
<h1 className="text-3xl leading-9 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14 dark:text-gray-100">
1515
Latest
1616
</h1>
1717
<p className="text-lg leading-7 text-gray-500 dark:text-gray-400">
@@ -28,14 +28,14 @@ export default function Home({ posts }) {
2828
<div className="space-y-2 xl:grid xl:grid-cols-4 xl:items-baseline xl:space-y-0">
2929
<dl>
3030
<dt className="sr-only">Published on</dt>
31-
<dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
31+
<dd className="text-base leading-6 font-medium text-gray-500 dark:text-gray-400">
3232
<time dateTime={date}>{formatDate(date, siteMetadata.locale)}</time>
3333
</dd>
3434
</dl>
3535
<div className="space-y-5 xl:col-span-3">
3636
<div className="space-y-6">
3737
<div>
38-
<h2 className="text-2xl font-bold leading-8 tracking-tight">
38+
<h2 className="text-2xl leading-8 font-bold tracking-tight">
3939
<Link
4040
href={`/blog/${slug}`}
4141
className="text-gray-900 dark:text-gray-100"
@@ -53,7 +53,7 @@ export default function Home({ posts }) {
5353
{summary}
5454
</div>
5555
</div>
56-
<div className="text-base font-medium leading-6">
56+
<div className="text-base leading-6 font-medium">
5757
<Link
5858
href={`/blog/${slug}`}
5959
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
@@ -71,7 +71,7 @@ export default function Home({ posts }) {
7171
</ul>
7272
</div>
7373
{posts.length > MAX_DISPLAY && (
74-
<div className="flex justify-end text-base font-medium leading-6">
74+
<div className="flex justify-end text-base leading-6 font-medium">
7575
<Link
7676
href="/blog"
7777
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"

‎app/not-found.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,19 @@ import Link from '@/components/Link'
33
export default function NotFound() {
44
return (
55
<div className="flex flex-col items-start justify-start md:mt-24 md:flex-row md:items-center md:justify-center md:space-x-6">
6-
<div className="space-x-2 pb-8 pt-6 md:space-y-5">
7-
<h1 className="text-6xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 md:border-r-2 md:px-6 md:text-8xl md:leading-14">
6+
<div className="space-x-2 pt-6 pb-8 md:space-y-5">
7+
<h1 className="text-6xl leading-9 font-extrabold tracking-tight text-gray-900 md:border-r-2 md:px-6 md:text-8xl md:leading-14 dark:text-gray-100">
88
404
99
</h1>
1010
</div>
1111
<div className="max-w-md">
12-
<p className="mb-4 text-xl font-bold leading-normal md:text-2xl">
12+
<p className="mb-4 text-xl leading-normal font-bold md:text-2xl">
1313
Sorry we couldn't find this page.
1414
</p>
1515
<p className="mb-8">But dont worry, you can find plenty of other things on our homepage.</p>
1616
<Link
1717
href="/"
18-
className="focus:shadow-outline-blue inline rounded-lg border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium leading-5 text-white shadow transition-colors duration-150 hover:bg-blue-700 focus:outline-none dark:hover:bg-blue-500"
18+
className="focus:shadow-outline-blue inline rounded-lg border border-transparent bg-blue-600 px-4 py-2 text-sm leading-5 font-medium text-white shadow-xs transition-colors duration-150 hover:bg-blue-700 focus:outline-hidden dark:hover:bg-blue-500"
1919
>
2020
Back to homepage
2121
</Link>

‎app/projects/page.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ export default function Projects() {
88
return (
99
<>
1010
<div className="divide-y divide-gray-200 dark:divide-gray-700">
11-
<div className="space-y-2 pb-8 pt-6 md:space-y-5">
12-
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
11+
<div className="space-y-2 pt-6 pb-8 md:space-y-5">
12+
<h1 className="text-3xl leading-9 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14 dark:text-gray-100">
1313
Projects
1414
</h1>
1515
<p className="text-lg leading-7 text-gray-500 dark:text-gray-400">

‎app/tags/page.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -12,21 +12,21 @@ export default async function Page() {
1212
const sortedTags = tagKeys.sort((a, b) => tagCounts[b] - tagCounts[a])
1313
return (
1414
<>
15-
<div className="flex flex-col items-start justify-start divide-y divide-gray-200 dark:divide-gray-700 md:mt-24 md:flex-row md:items-center md:justify-center md:space-x-6 md:divide-y-0">
16-
<div className="space-x-2 pb-8 pt-6 md:space-y-5">
17-
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:border-r-2 md:px-6 md:text-6xl md:leading-14">
15+
<div className="flex flex-col items-start justify-start divide-y divide-gray-200 md:mt-24 md:flex-row md:items-center md:justify-center md:space-x-6 md:divide-y-0 dark:divide-gray-700">
16+
<div className="space-x-2 pt-6 pb-8 md:space-y-5">
17+
<h1 className="text-3xl leading-9 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10 md:border-r-2 md:px-6 md:text-6xl md:leading-14 dark:text-gray-100">
1818
Tags
1919
</h1>
2020
</div>
2121
<div className="flex max-w-lg flex-wrap">
2222
{tagKeys.length === 0 && 'No tags found.'}
2323
{sortedTags.map((t) => {
2424
return (
25-
<div key={t} className="mb-2 mr-5 mt-2">
25+
<div key={t} className="mt-2 mr-5 mb-2">
2626
<Tag text={t} />
2727
<Link
2828
href={`/tags/${slug(t)}`}
29-
className="-ml-2 text-sm font-semibold uppercase text-gray-600 dark:text-gray-300"
29+
className="-ml-2 text-sm font-semibold text-gray-600 uppercase dark:text-gray-300"
3030
aria-label={`View posts tagged ${t}`}
3131
>
3232
{` (${tagCounts[t]})`}

‎components/Card.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const Card = ({ title, description, imgSrc, href }) => (
66
<div
77
className={`${
88
imgSrc && 'h-full'
9-
} overflow-hidden rounded-md border-2 border-gray-200 border-opacity-60 dark:border-gray-700`}
9+
} overflow-hidden rounded-md border-2 border-gray-200/60 dark:border-gray-700/60`}
1010
>
1111
{imgSrc &&
1212
(href ? (
@@ -29,7 +29,7 @@ const Card = ({ title, description, imgSrc, href }) => (
2929
/>
3030
))}
3131
<div className="p-6">
32-
<h2 className="mb-3 text-2xl font-bold leading-8 tracking-tight">
32+
<h2 className="mb-3 text-2xl leading-8 font-bold tracking-tight">
3333
{href ? (
3434
<Link href={href} aria-label={`Link to ${title}`}>
3535
{title}
@@ -42,7 +42,7 @@ const Card = ({ title, description, imgSrc, href }) => (
4242
{href && (
4343
<Link
4444
href={href}
45-
className="text-base font-medium leading-6 text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
45+
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 text-base leading-6 font-medium"
4646
aria-label={`Link to ${title}`}
4747
>
4848
Learn more &rarr;

‎components/Header.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -28,15 +28,15 @@ const Header = () => {
2828
)}
2929
</div>
3030
</Link>
31-
<div className="flex items-center space-x-4 leading-5 sm:space-x-6">
32-
<div className="no-scrollbar hidden max-w-40 items-center space-x-4 overflow-x-auto pr-2 sm:flex sm:space-x-6 md:max-w-72 lg:max-w-96">
31+
<div className="flex items-center space-x-4 leading-5 sm:-mr-6 sm:space-x-6">
32+
<div className="no-scrollbar hidden max-w-40 items-center gap-x-4 overflow-x-auto sm:flex md:max-w-72 lg:max-w-96">
3333
{headerNavLinks
3434
.filter((link) => link.href !== '/')
3535
.map((link) => (
3636
<Link
3737
key={link.title}
3838
href={link.href}
39-
className="m-1 block font-medium text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400"
39+
className="hover:text-primary-500 dark:hover:text-primary-400 m-1 font-medium text-gray-900 dark:text-gray-100"
4040
>
4141
{link.title}
4242
</Link>

‎components/MobileNav.tsx

+11-11
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client'
22

3-
import { Dialog, Transition } from '@headlessui/react'
3+
import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react'
44
import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock'
55
import { Fragment, useState, useEffect, useRef } from 'react'
66
import Link from './Link'
@@ -33,7 +33,7 @@ const MobileNav = () => {
3333
xmlns="http://www.w3.org/2000/svg"
3434
viewBox="0 0 20 20"
3535
fill="currentColor"
36-
className="h-8 w-8 text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400"
36+
className="hover:text-primary-500 dark:hover:text-primary-400 h-8 w-8 text-gray-900 dark:text-gray-100"
3737
>
3838
<path
3939
fillRule="evenodd"
@@ -44,7 +44,7 @@ const MobileNav = () => {
4444
</button>
4545
<Transition appear show={navShow} as={Fragment} unmount={false}>
4646
<Dialog as="div" onClose={onToggleNav} unmount={false}>
47-
<Transition.Child
47+
<TransitionChild
4848
as={Fragment}
4949
enter="ease-out duration-300"
5050
enterFrom="opacity-0"
@@ -55,9 +55,9 @@ const MobileNav = () => {
5555
unmount={false}
5656
>
5757
<div className="fixed inset-0 z-60 bg-black/25" />
58-
</Transition.Child>
58+
</TransitionChild>
5959

60-
<Transition.Child
60+
<TransitionChild
6161
as={Fragment}
6262
enter="transition ease-in-out duration-300 transform"
6363
enterFrom="translate-x-full opacity-0"
@@ -67,16 +67,16 @@ const MobileNav = () => {
6767
leaveTo="translate-x-full opacity-0"
6868
unmount={false}
6969
>
70-
<Dialog.Panel className="fixed left-0 top-0 z-70 h-full w-full bg-white opacity-95 duration-300 dark:bg-gray-950 dark:opacity-[0.98]">
70+
<DialogPanel className="fixed top-0 left-0 z-70 h-full w-full bg-white/95 duration-300 dark:bg-gray-950/98">
7171
<nav
7272
ref={navRef}
73-
className="mt-8 flex h-full basis-0 flex-col items-start overflow-y-auto pl-12 pt-2 text-left"
73+
className="mt-8 flex h-full basis-0 flex-col items-start overflow-y-auto pt-2 pl-12 text-left"
7474
>
7575
{headerNavLinks.map((link) => (
7676
<Link
7777
key={link.title}
7878
href={link.href}
79-
className="mb-4 py-2 pr-4 text-2xl font-bold tracking-widest text-gray-900 outline outline-0 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400"
79+
className="hover:text-primary-500 dark:hover:text-primary-400 mb-4 py-2 pr-4 text-2xl font-bold tracking-widest text-gray-900 outline outline-0 dark:text-gray-100"
8080
onClick={onToggleNav}
8181
>
8282
{link.title}
@@ -85,7 +85,7 @@ const MobileNav = () => {
8585
</nav>
8686

8787
<button
88-
className="fixed right-4 top-7 z-80 h-16 w-16 p-4 text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400"
88+
className="hover:text-primary-500 dark:hover:text-primary-400 fixed top-7 right-4 z-80 h-16 w-16 p-4 text-gray-900 dark:text-gray-100"
8989
aria-label="Toggle Menu"
9090
onClick={onToggleNav}
9191
>
@@ -97,8 +97,8 @@ const MobileNav = () => {
9797
/>
9898
</svg>
9999
</button>
100-
</Dialog.Panel>
101-
</Transition.Child>
100+
</DialogPanel>
101+
</TransitionChild>
102102
</Dialog>
103103
</Transition>
104104
</>

‎components/PageTitle.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ interface Props {
66

77
export default function PageTitle({ children }: Props) {
88
return (
9-
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-5xl md:leading-14">
9+
<h1 className="text-3xl leading-9 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10 md:text-5xl md:leading-14 dark:text-gray-100">
1010
{children}
1111
</h1>
1212
)

‎components/ScrollTopAndComment.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const ScrollTopAndComment = () => {
2424
}
2525
return (
2626
<div
27-
className={`fixed bottom-8 right-8 hidden flex-col gap-3 ${show ? 'md:flex' : 'md:hidden'}`}
27+
className={`fixed right-8 bottom-8 hidden flex-col gap-3 ${show ? 'md:flex' : 'md:hidden'}`}
2828
>
2929
{siteMetadata.comments?.provider && (
3030
<button

‎components/SearchButton.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,7 @@ const SearchButton = () => {
1818
viewBox="0 0 24 24"
1919
strokeWidth={1.5}
2020
stroke="currentColor"
21-
className="h-6 w-6 text-gray-900 hover:text-primary-500 dark:text-gray-100
22-
dark:hover:text-primary-400"
21+
className="hover:text-primary-500 dark:hover:text-primary-400 h-6 w-6 text-gray-900 dark:text-gray-100"
2322
>
2423
<path
2524
strokeLinecap="round"

‎components/Tag.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const Tag = ({ text }: Props) => {
88
return (
99
<Link
1010
href={`/tags/${slug(text)}`}
11-
className="mr-3 text-sm font-medium uppercase text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
11+
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 mr-3 text-sm font-medium uppercase"
1212
>
1313
{text.split(' ').join('-')}
1414
</Link>

‎components/ThemeSwitch.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -62,9 +62,9 @@ const ThemeSwitch = () => {
6262
useEffect(() => setMounted(true), [])
6363

6464
return (
65-
<div className="mr-5 flex items-center">
65+
<div className="flex items-center">
6666
<Menu as="div" className="relative inline-block text-left">
67-
<div className="flex items-center justify-center hover:text-primary-500 dark:hover:text-primary-400">
67+
<div className="hover:text-primary-500 dark:hover:text-primary-400 flex items-center justify-center">
6868
<MenuButton aria-label="Theme switcher">
6969
{mounted ? resolvedTheme === 'dark' ? <Moon /> : <Sun /> : <Blank />}
7070
</MenuButton>
@@ -78,7 +78,7 @@ const ThemeSwitch = () => {
7878
leaveFrom="transform opacity-100 scale-100"
7979
leaveTo="transform opacity-0 scale-95"
8080
>
81-
<MenuItems className="absolute right-0 z-50 mt-2 w-32 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800">
81+
<MenuItems className="ring-opacity-5 absolute right-0 z-50 mt-2 w-32 origin-top-right divide-y divide-gray-100 rounded-md bg-white ring-1 shadow-lg ring-black focus:outline-hidden dark:bg-gray-800">
8282
<RadioGroup value={theme} onChange={setTheme}>
8383
<div className="p-1">
8484
<Radio value="light">

‎components/social-icons/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ const SocialIcon = ({ kind, href, size = 8 }: SocialIconProps) => {
5252
>
5353
<span className="sr-only">{kind}</span>
5454
<SocialSvg
55-
className={`fill-current text-gray-700 hover:text-primary-500 dark:text-gray-200 dark:hover:text-primary-400 h-${size} w-${size}`}
55+
className={`hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-${size} w-${size}`}
5656
/>
5757
</a>
5858
)

‎css/prism.css

+8-10
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@reference "./tailwind.css";
2+
13
/**
24
* CSS Styles for code highlighting.
35
* Feel free to customize token styles
@@ -7,7 +9,7 @@
79

810
/* Code title styles */
911
.remark-code-title {
10-
@apply rounded-t bg-gray-700 px-5 py-3 font-mono text-sm font-bold text-gray-200 dark:bg-gray-800;
12+
@apply rounded-xs bg-gray-700 px-5 py-3 font-mono text-sm font-bold text-gray-200 dark:bg-gray-800;
1113
}
1214

1315
.remark-code-title + div > pre {
@@ -20,23 +22,23 @@
2022
}
2123

2224
.code-line {
23-
@apply -mx-4 block border-l-4 border-transparent pl-4 pr-4;
25+
@apply -mx-4 block border-l-4 border-transparent pr-4 pl-4;
2426
}
2527

2628
.code-line.inserted {
27-
@apply bg-green-500 bg-opacity-20;
29+
@apply bg-green-500/20;
2830
}
2931

3032
.code-line.deleted {
31-
@apply bg-red-500 bg-opacity-20;
33+
@apply bg-red-500/20;
3234
}
3335

3436
.highlight-line {
35-
@apply -mx-4 border-l-4 border-primary-500 bg-gray-700 bg-opacity-50;
37+
@apply border-primary-500 -mx-4 border-l-4 bg-gray-700/50;
3638
}
3739

3840
.line-number::before {
39-
@apply -ml-2 mr-4 inline-block w-4 text-right text-gray-400;
41+
@apply mr-4 -ml-2 inline-block w-4 text-right text-gray-400;
4042
content: attr(line);
4143
}
4244

@@ -138,7 +140,3 @@
138140
.token.table {
139141
display: inline;
140142
}
141-
142-
.token.table {
143-
display: inline;
144-
}

0 commit comments

Comments
 (0)