Taevas/taevas.xyz
Taevas/taevas.xyz
1
0
Fork 0
Code Issues Pull requests Projects Activity

Upgrade Tailwind CSS from v3 to v4

Browse source
This commit is contained in:
Taevas 2025-03-12 14:42:11 +01:00
parent 23e465e546
commit aee74ce9e8
12 changed files with 38 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
bun.lockb
View file

Binary file not shown.

2
index.html
View file

@ -10,7 +10,7 @@
<script defer src="https://visitors.taevas.xyz/script.js" data-website-id="f196d626-e609-4841-9a80-0dc60f523ed5"></script> <script defer src="https://visitors.taevas.xyz/script.js" data-website-id="f196d626-e609-4841-9a80-0dc60f523ed5"></script>
<title>Site - taevas.xyz</title> <title>Site - taevas.xyz</title>
</head> </head>
<body class="bg-gradient-to-tl from-amber-100 via-sky-300 to-amber-100 bg-fixed"> <body>
<span id="links" style="display: none;"> <span id="links" style="display: none;">
<a rel="me" href="https://taevas.xyz/">Taevas</a> <a rel="me" href="https://taevas.xyz/">Taevas</a>
<a rel="me" href="https://www.youtube.com/@TTTaevas">YouTube</a> <a rel="me" href="https://www.youtube.com/@TTTaevas">YouTube</a>

7
package.json
View file

@ -1,7 +1,7 @@
{ {
"scripts": { "scripts": {
"dev": "bun css && vite build && bun --hot index.ts --dev", "dev": "bun css && vite build && bun --hot index.ts --dev",
"css": "tailwindcss -i ./src/App.css -o index.css", "css": "bunx @tailwindcss/cli -i ./src/App.css -o index.css",
"lint": "eslint .", "lint": "eslint .",
"getready": "bun install && bun css && vite build", "getready": "bun install && bun css && vite build",
"start": "bun getready && bun run index.ts" "start": "bun getready && bun run index.ts"
@ -22,18 +22,17 @@
"@eslint/js": "^9.22.0", "@eslint/js": "^9.22.0",
"@stylistic/eslint-plugin": "^3.1.0", "@stylistic/eslint-plugin": "^3.1.0",
"@tailwindcss/forms": "^0.5.10", "@tailwindcss/forms": "^0.5.10",
"@tailwindcss/postcss": "^4.0.12", "@tailwindcss/postcss": "^4.0.13",
"@types/bun": "latest", "@types/bun": "latest",
"@types/react": "^19.0.10", "@types/react": "^19.0.10",
"@types/react-dom": "^19.0.4", "@types/react-dom": "^19.0.4",
"autoprefixer": "^10.4.21",
"dotenv": "^16.4.7", "dotenv": "^16.4.7",
"eslint": "^9.22.0", "eslint": "^9.22.0",
"eslint-config-xo-typescript": "^7.0.0", "eslint-config-xo-typescript": "^7.0.0",
"eslint-plugin-react": "^7.37.4", "eslint-plugin-react": "^7.37.4",
"postcss": "^8.5.3", "postcss": "^8.5.3",
"react-animate-height": "^3.2.3", "react-animate-height": "^3.2.3",
"tailwindcss": "^3.4.17", "tailwindcss": "^4.0.13",
"typescript": "^5.8.2", "typescript": "^5.8.2",
"typescript-eslint": "^8.26.1", "typescript-eslint": "^8.26.1",
"vite": "^6.2.1" "vite": "^6.2.1"

3
postcss.config.cjs
View file

@ -1,6 +1,5 @@
module.exports = { module.exports = {
plugins: { plugins: {
tailwindcss: {}, '@tailwindcss/postcss': {},
autoprefixer: {},
}, },
} }

24
src/App.css
View file

@ -1,6 +1,24 @@
@tailwind base; @import 'tailwindcss';
@tailwind components;
@tailwind utilities; @config '../tailwind.config.js';
/*
The default border color has changed to `currentColor` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
looks the same as it did with Tailwind CSS v3.
If we ever want to remove these styles, we need to add an explicit border
color utility to any element that depends on these defaults.
*/
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentColor);
}
}
@font-face { @font-face {
font-family: "LexendDeca"; font-family: "LexendDeca";

2
src/App.tsx
View file

@ -8,7 +8,7 @@ import Infos from "./Infos/index.tsx";
const root = createRoot(document.getElementById("root")!); const root = createRoot(document.getElementById("root")!);
root.render( root.render(
<React.StrictMode> <React.StrictMode>
<div className="App flex text-center bg-gradient-to-tl from-amber-100 via-sky-300 to-amber-100 bg-fixed"> <div className="App flex text-center bg-linear-to-tl from-amber-100 via-sky-300 to-amber-100 bg-fixed">
<MainContent/> <MainContent/>
<Infos/> <Infos/>
</div> </div>

6
src/Infos/Info.tsx
View file

@ -17,7 +17,7 @@ export default class Info extends Component<{
${state !== 2 ? "text-sky-600" : "text-purple-600"}`}> ${state !== 2 ? "text-sky-600" : "text-purple-600"}`}>
{this.props.type} {this.props.type}
</h2> </h2>
<div className="block w-72 bg-gradient-to-r from-sky-900 to-indigo-900 rounded-r-xl border-b-2 border-r-2 border-white"> <div className="block w-72 bg-linear-to-r from-sky-900 to-indigo-900 rounded-r-xl border-b-2 border-r-2 border-white">
{ {
state === 1 ? state === 1 ?
this.props.websites.map((website) => { this.props.websites.map((website) => {
@ -26,7 +26,7 @@ export default class Info extends Component<{
</div>; </div>;
}) : }) :
state === 2 ? state === 2 ?
<div className="flex h-full bg-gradient-to-r from-purple-900 to-pink-900 rounded-xl rounded-l-none border-t-2 border-white"> <div className="flex h-full bg-linear-to-r from-purple-900 to-pink-900 rounded-xl rounded-l-none border-t-2 border-white">
<div className="h-min m-auto"> <div className="h-min m-auto">
<div className="w-min mb-2 mx-auto"> <div className="w-min mb-2 mx-auto">
<MisuseOutline size={64} fill="red"/> <MisuseOutline size={64} fill="red"/>
@ -35,7 +35,7 @@ export default class Info extends Component<{
<p className="mx-4 mb-2">Please contact me and let me know about it!</p> <p className="mx-4 mb-2">Please contact me and let me know about it!</p>
</div> </div>
</div> : </div> :
<div className="flex h-full bg-gradient-to-r from-sky-900 to-indigo-900 rounded-xl rounded-l-none border-t-2 border-white"> <div className="flex h-full bg-linear-to-r from-sky-900 to-indigo-900 rounded-xl rounded-l-none border-t-2 border-white">
<div className="animate-pulse m-auto"> <div className="animate-pulse m-auto">
<div className="animate-spin h-16 w-16 mx-auto mb-2 border-8 border-sky-600 border-r-gray-200 rounded-full"/> <div className="animate-spin h-16 w-16 mx-auto mb-2 border-8 border-sky-600 border-r-gray-200 rounded-full"/>
<p className="mx-4">Loading...</p> <p className="mx-4">Loading...</p>

2
src/Infos/Media/Anilist.tsx
View file

@ -26,7 +26,7 @@ export default function Anilist() {
try { try {
setElements([ setElements([
<div key={"data"} className="flex mb-4"> <div key={"data"} className="flex mb-4">
<img className="m-auto w-16 h-22" alt="anime cover" src={data.cover} /> <img className="m-auto w-18 h-24" alt="anime cover" src={data.cover} />
<div className="m-auto pl-2"> <div className="m-auto pl-2">
<Link classes="mt-1 px-1 py-2 inline-block w-full font-bold leading-[18px] bg-white text-blue-800" link={data.url} text={data.title}/> <Link classes="mt-1 px-1 py-2 inline-block w-full font-bold leading-[18px] bg-white text-blue-800" link={data.url} text={data.title}/>
<p className="mt-4">Started: <strong>{data.startDate}</strong></p> <p className="mt-4">Started: <strong>{data.startDate}</strong></p>

8
src/Infos/index.tsx
View file

@ -12,10 +12,10 @@ export default class Infos extends Component {
private readonly collection = React.createRef<HTMLDivElement>(); private readonly collection = React.createRef<HTMLDivElement>();
render() { render() {
return <div ref={this.collection} className="z-[110] lg:z-[0] w-[27px] lg:w-[360px] fixed right-0 h-screen outline outline-4 outline-white overflow-y-auto return <div ref={this.collection} className="z-110 lg:z-0 w-[27px] lg:w-[360px] fixed right-0 h-screen outline outline-4 outline-white overflow-y-auto
bg-gradient-to-r from-sky-600 to-indigo-600"> bg-linear-to-r from-sky-600 to-indigo-600">
<div draggable="false" ref={this.dragbar} className="z-[100] h-full w-[25px] fixed right-[7px] lg:right-[340px] cursor-ew-resize select-none hover:bg-gradient-to-r from-white/80 to-white/1 active:to-white/20"></div> <div draggable="false" ref={this.dragbar} className="z-100 h-full w-[25px] fixed right-[7px] lg:right-[340px] cursor-ew-resize select-none hover:bg-linear-to-r from-white/80 to-white/1 active:to-white/20"></div>
<div className="z-[90] p-2.5 flex flex-wrap text-white"> <div className="z-90 p-2.5 flex flex-wrap text-white">
<Media/> <Media/>
<Fediverse/> <Fediverse/>
<Coding/> <Coding/>

2
src/Main/MainWindow/SocialButtons/SocialButton.tsx
View file

@ -20,7 +20,7 @@ export default function SocialButton({
<button title={title} className={` <button title={title} className={`
m-1 h-12 w-12 bg-white text-black tracking-[-.2em] m-1 h-12 w-12 bg-white text-black tracking-[-.2em]
rounded-full border-solid hover:border-dashed active:brightness-95 border-4 hover:border-8 ${border} rounded-full border-solid hover:border-dashed active:brightness-95 border-4 hover:border-8 ${border}
transition-transform duration-75 ${rotation} hover:rotate-0 cursor-pointer transition-transform duration-75 ${rotation} hover:rotate-0
`}> `}>
<img draggable="false" className={`${padding} w-32 absolute right-1/2 bottom-1/2 translate-x-2/4 translate-y-2/4`} src={image} alt={title}/> <img draggable="false" className={`${padding} w-32 absolute right-1/2 bottom-1/2 translate-x-2/4 translate-y-2/4`} src={image} alt={title}/>
</button> </button>

2
src/Main/MainWindow/TabButtons/TabButton.tsx
View file

@ -10,7 +10,7 @@ export default function TabButton({
content: string | React.JSX.Element; content: string | React.JSX.Element;
}) { }) {
return ( return (
<button className={`text-xl text-white m-2 p-4 border-solid border-white border-4 rounded-md bg-gradient-to-t from-70% ${colors} active:brightness-90`} onClick={onClick}> <button className={`cursor-pointer text-xl text-white m-2 p-4 border-solid border-white border-4 rounded-md bg-linear-to-t from-70% ${colors} active:brightness-90`} onClick={onClick}>
{content} {content}
</button> </button>
); );

2
src/parts/CopyField.tsx
View file

@ -25,7 +25,7 @@ export default function CopyField({
} }
return ( return (
<div className="flex w-fit mx-auto m-2 pr-4 pl-0 text-lg bg-red-500 hover:shadow"> <div className="flex w-fit mx-auto m-2 pr-4 pl-0 text-lg bg-red-500 hover:shadow-sm">
{imageUrl ? <div className="bg-red-700 p-4"> {imageUrl ? <div className="bg-red-700 p-4">
<img src={imageUrl} draggable="false" className="w-8 h-8"/> <img src={imageUrl} draggable="false" className="w-8 h-8"/>
</div> : ""} </div> : ""}