💄 Change to use tailwindcss

aqyuki · Dec 31, 2024 · 7e5d939 · 7e5d939
1 parent 7ad9af9
commit 7e5d939
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 35 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -1,6 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
   --font-size: 12px;
-  --grid-gap: 1rem;
   --background: linear-gradient(
     15deg,
     rgba(168, 202, 240, 1) 20%,
@@ -13,12 +16,11 @@ body {
   font-size: var(--font-size);
   color: var(--foreground);
   background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
 }
 
 main {
   display: grid;
-  padding: 0 var(--grid-gap);
-  gap: var(--grid-gap);
+  padding: 0 theme(gap.1rem);
+  gap: theme(gap.1rem);
   grid-template-columns: repeat(12, 1fr);
 }
diff --git a/src/feature/avatar.tsx b/src/feature/avatar.tsx
@@ -1,9 +1,4 @@
 import Image from 'next/image'
-import type { CSSProperties } from 'react'
-
-const imageStyle: CSSProperties = {
-  borderRadius: '50%',
-}
 
 export function Avatar() {
   return (
@@ -13,7 +8,7 @@ export function Avatar() {
       width={180}
       height={180}
       priority
-      style={imageStyle}
+      className="rounded-4xl"
     />
   )
 }
diff --git a/src/feature/hero.tsx b/src/feature/hero.tsx
@@ -1,28 +1,6 @@
 import { Andika, Sawarabi_Gothic } from 'next/font/google'
-import type { CSSProperties } from 'react'
 import { Avatar } from './avatar'
 
-const heroStyle: CSSProperties = {
-  width: '100%',
-  height: '100vh',
-  display: 'grid',
-  placeItems: 'center',
-  gridColumnStart: 5,
-  gridColumnEnd: 9,
-}
-
-const heroCard: CSSProperties = {
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  gap: '3rem',
-}
-
-const heroTitleGroup: CSSProperties = {
-  width: '100%',
-  textAlign: 'center',
-}
-
 const sawarabiGothic = Sawarabi_Gothic({
   weight: '400',
   subsets: ['latin'],
@@ -35,10 +13,10 @@ const andika = Andika({
 
 export function Hero() {
   return (
-    <div style={heroStyle}>
-      <div style={heroCard}>
+    <div className="w-full h-screen grid place-items-center col-span-full">
+      <div className="flex flex-col items-center gap-2rem">
         <Avatar />
-        <div style={heroTitleGroup}>
+        <div className="w-full text-center text-xl">
           <h1 className={sawarabiGothic.className}>しろね✨</h1>
           <h1 className={andika.className}>Web Developer</h1>
         </div>