2023-09-11 일지

오늘 한 일

gloddy 개발
- tailwind SSR에서 스타일 안먹는 이슈 해결
- 구글 맵 api에서 place id로 장소 검색하는 훅 추가

tailwind SSR에서 스타일 안먹는 이슈 해결

드디어 해결했다.

저번 TIL에 쓴지 10일 동안 고민했는데, 결국 해결했다.

이슈를 참고해서 해결할 수 있었다.

1. tailwind-cli로 minify된 css 파일 생성

npx tailwindcss-cli build -o ./style/tailwind.css --minify

2. layout.tsx에서 해당 css 파일을 읽어서 적용

스타일을 직접 주입하는 방식으로 해결했다.

function Layout({ children }: StrictPropsWithChildren) {
  const filePath = `src/style/tailwindSSR.css`
  const styleSheetContent = readFileSync(filePath, 'utf8')

  return (
    <html lang="ko">
      <head>
        <style dangerouslySetInnerHTML={{ __html: styleSheetContent }} />
      </head>
      <body className="flex h-full min-h-[100dvh] w-screen justify-center overflow-y-scroll bg-slate-50">
        <div className="relative min-h-[100dvh] w-full max-w-450 bg-white text-sign-primary">
          {children}
        </div>
      </body>
    </html>
  )
}

👍👍👍

vanilla-extract

selector

&는 현재 엘리먼트를 가리킨다.

// styles.css.ts
import { style } from '@vanilla-extract/css'

const link = style({
  selectors: {
    '&:hover:not(:active)': {
      border: '2px solid aquamarine',
    },
    'nav li > &': {
      textDecoration: 'underline',
    },
  },
})

이렇게도 가능하다.

import { style } from '@vanilla-extract/css'

export const parent = style({})

export const child = style({
  selectors: {
    [`${parent}:focus &`]: {
      background: '#fafafa',
    },
  },
})

특정 클래스가 아닌 일반적인 a 태그를 선택하는 방법은 다음과 같다.

import { style, globalStyle } from '@vanilla-extract/css'

export const parent = style({})

globalStyle(`${parent} a[href]`, {
  color: 'pink',
})

내일 할 일

gloddy 개발
- 다국어 추가