Upgrade Tailwind CSS from v3 to v4
This commit is contained in:
parent
23e465e546
commit
aee74ce9e8
12 changed files with 38 additions and 22 deletions
BIN
bun.lockb
BIN
bun.lockb
Binary file not shown.
|
|
@ -10,7 +10,7 @@
|
|||
<script defer src="https://visitors.taevas.xyz/script.js" data-website-id="f196d626-e609-4841-9a80-0dc60f523ed5"></script>
|
||||
<title>Site - taevas.xyz</title>
|
||||
</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;">
|
||||
<a rel="me" href="https://taevas.xyz/">Taevas</a>
|
||||
<a rel="me" href="https://www.youtube.com/@TTTaevas">YouTube</a>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"scripts": {
|
||||
"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 .",
|
||||
"getready": "bun install && bun css && vite build",
|
||||
"start": "bun getready && bun run index.ts"
|
||||
|
|
@ -22,18 +22,17 @@
|
|||
"@eslint/js": "^9.22.0",
|
||||
"@stylistic/eslint-plugin": "^3.1.0",
|
||||
"@tailwindcss/forms": "^0.5.10",
|
||||
"@tailwindcss/postcss": "^4.0.12",
|
||||
"@tailwindcss/postcss": "^4.0.13",
|
||||
"@types/bun": "latest",
|
||||
"@types/react": "^19.0.10",
|
||||
"@types/react-dom": "^19.0.4",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"dotenv": "^16.4.7",
|
||||
"eslint": "^9.22.0",
|
||||
"eslint-config-xo-typescript": "^7.0.0",
|
||||
"eslint-plugin-react": "^7.37.4",
|
||||
"postcss": "^8.5.3",
|
||||
"react-animate-height": "^3.2.3",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"tailwindcss": "^4.0.13",
|
||||
"typescript": "^5.8.2",
|
||||
"typescript-eslint": "^8.26.1",
|
||||
"vite": "^6.2.1"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
'@tailwindcss/postcss': {},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
24
src/App.css
24
src/App.css
|
|
@ -1,6 +1,24 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@import 'tailwindcss';
|
||||
|
||||
@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-family: "LexendDeca";
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import Infos from "./Infos/index.tsx";
|
|||
const root = createRoot(document.getElementById("root")!);
|
||||
root.render(
|
||||
<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/>
|
||||
<Infos/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ export default class Info extends Component<{
|
|||
${state !== 2 ? "text-sky-600" : "text-purple-600"}`}>
|
||||
{this.props.type}
|
||||
</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 ?
|
||||
this.props.websites.map((website) => {
|
||||
|
|
@ -26,7 +26,7 @@ export default class Info extends Component<{
|
|||
</div>;
|
||||
}) :
|
||||
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="w-min mb-2 mx-auto">
|
||||
<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>
|
||||
</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-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>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ export default function Anilist() {
|
|||
try {
|
||||
setElements([
|
||||
<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">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -12,10 +12,10 @@ export default class Infos extends Component {
|
|||
private readonly collection = React.createRef<HTMLDivElement>();
|
||||
|
||||
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
|
||||
bg-gradient-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 className="z-[90] p-2.5 flex flex-wrap text-white">
|
||||
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-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-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">
|
||||
<Media/>
|
||||
<Fediverse/>
|
||||
<Coding/>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default function SocialButton({
|
|||
<button title={title} className={`
|
||||
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}
|
||||
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}/>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ export default function TabButton({
|
|||
content: string | React.JSX.Element;
|
||||
}) {
|
||||
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}
|
||||
</button>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export default function CopyField({
|
|||
}
|
||||
|
||||
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">
|
||||
<img src={imageUrl} draggable="false" className="w-8 h-8"/>
|
||||
</div> : ""}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue