# tailwind

80개의 포스트
post-thumbnail

[Tailwind] table 태그 테두리에 rounded 효과를 넣고 싶을 때

table 태그를 가지고 게시판을 만들다가 위 아래 모서리를 약간 둥글게 만들고 싶었다. 그런데 생각처럼 딱딱 만들어지지 않고, 시행착오를 거쳤다. 어떻게 구현했는지 기록하고자 한다.

약 8시간 전
·
0개의 댓글
·
post-thumbnail

[CSS] table 등에서 텍스트가 넘어갈 경우(ft. Tailwind)

table 태그로 게시판을 만들거나 할 때 제목이 길어져서 크기가 멋대로 변하는 것을 겪은 적이 있을 것이다. 다른 사이트들을 찾아보면 ...이라는 표시로 제목이 잘리는 것을 볼 수 있는데, 이는 직접 입력한 것일까? 그럴리가 없다. 방법을 알아보자!

약 11시간 전
·
0개의 댓글
·

[Tailwind] 반응형 breakpoint 설정시 주의 사항

프로젝트에서 반응형 웹사이트 제작 중에 추가적인 breakpoint를 만들고 싶었다.그래서 공식문서에 있는대로 만들었는데...이미 다 만들었던 반응형 컴포넌트들이 갑자기 작동을 안한다..!무슨 일이지?필자는 프로젝트 도중에 2sm 이라는 breakpoint를 추가로 만

약 16시간 전
·
0개의 댓글
·

살려줘 시리즈2탄

아니 소문이 이렇게 빠른가 살려줘 시리즈 자랑한건 안 비밀 여차저차 내용을 들어보니 img 문제가 발생하면 엑셀에 위와 같이 정리를 하는데, 품명과 품번을 하나하나 찾아서 적는게 너무 불편하다 품목을 적으면 품번이 자동 세팅되거나, 품번을 입력하면 품명이 자동

4일 전
·
0개의 댓글
·
post-thumbnail

hover에 따라 글자 및 아이콘 색 변경

hover:bg-\[변경할 색]hover를 줬을 때 글자색과 아이콘 색도 변경되게 하려면 hover를 주는 요소에 group을 넣어주면 된다.hover에 따라서 글자색을 변경하려면 group-hover: text-\[변경할 색] 추가해준다.hover에 따라서 아이콘 색

6일 전
·
0개의 댓글
·
post-thumbnail

CRA tailwindcss 적용하기

create react app 으로 시작한 리액트 프로젝트에 간단하게tailwind css 를 적용하기 위하여 작성한다.구글링을 하였을 때, 다양한 방법들이 있었지만 간단하고 빠르게 cra 프로젝트에 적용할 수 있는 방법을 공유한다.tailwind.config.js루트

2022년 9월 18일
·
0개의 댓글
·

Notion Project

오늘 한 일 : 로티 애니메이션을 적용 헤더의 각 nav에 link연결 다크모드 로티 애니메이션 같은 경우는 어제 거의 마무리된 상태라 오늘은 코드에 이상이 없는지만 확인하고 마무리됐다. Link 이제 Next에서 제공해주는 Link를 이용해서 경로를 통해 이동하는건 익숙한 느낌이 든다. 메인 페이지와 프로젝트까지 연결해주었다. 오늘의 특이점은 ...

2022년 9월 16일
·
0개의 댓글
·

NextJS Protfolio

오늘부터 팀 프로젝트 준비를 멈추고 개인 포트폴리오용 프로젝트를 시작했다. 팀원들 각각의 계획에 변동이 생겨서 일단 보류로 해두고 내 개인 프로젝트를 준비하려 한다. NextJs , tailwind , typeScript 와 노션 API를 사용해 진행하려한다. 오늘은 기본 파일 세팅과 Header , Footer 각 컴포넌트를 Layout에 몰아서...

2022년 9월 15일
·
0개의 댓글
·
post-thumbnail

storybook -2

스토리북에 테일윈드 적용하기

2022년 9월 15일
·
0개의 댓글
·
post-thumbnail

220914 특화 프로젝트 개발일지

특화 프로젝트 개발일지

2022년 9월 14일
·
0개의 댓글
·
post-thumbnail

구글 주별 캘린더 클론 코딩이라 쓰고 생각정리라 읽는다.

구글 캘린더 기능 중 주별 캘린더에 해당 하는 부분을 클론코딩해보았다. 그런데 일단 이번 포스팅은 클론 코딩 보다는 내 생각 정리가 주된..

2022년 9월 7일
·
0개의 댓글
·

TIL: Tailwind | keyframes, animation - 220905

tailwind css에서 className에 브라켓이 씌워져있으면 자동완성이 되지 않는다..

2022년 9월 5일
·
0개의 댓글
·

[Tailwind] Error : ruleSet[1].rules[1].oneOf[5].use[1], ruleSet[1].rules[1].oneOf[5].use[2]

필자가 Tailwind + Typescript + React를 사용해서 웹 페이지를 만들던 중 아래와 같은 에러를 마주했다.참고 이미지이 에러를 해결하는데 5일이 걸렸다. 아무리 봐도 이유를 몰랐기 때문에...필자가 작성한 코드 파일에서 문제가 생긴게 아닌 것 같기 때

2022년 8월 25일
·
0개의 댓글
·

vue3 & tailwind

vue 프로젝트 시작하기 터미널 - 'npm init vue@latest' 입력

2022년 8월 18일
·
0개의 댓글
·

[Front] onFocus 이벤트

해당 svg 버튼을 눌렀을 때 탭창이 뜨게 구현하고자 함OnBlur 이벤트와 OnFocus 이벤트가 작동하지 않음찾아보니OnFocus 이벤트는 대화형 요소에만 작용함대화형 요소 : a, button, details, input, select, textarea이외의 요소

2022년 8월 9일
·
0개의 댓글
·

[Tailwind] 가상 클래스(pseudo class) odd, even 사용하기(ft.map 메서드)

CSS에서 nth-child(odd), nth-child(even)로 사용했던 홀수번, 짝수번 요소의 스타일 설정을 Tailwind에서는 어떻게 할까?순서에 따라 다른 스타일을 적용하고자 하는 그 태그에 odd와 even을 사용하면 된다.일반 CSS와 다를게 하나도 없

2022년 8월 8일
·
0개의 댓글
·

[Tailwind] 이미지 hover시 확대 효과

쇼핑몰 등의 웹사이트에서 이미지에 마우스를 올리면 이미지가 약간 확대되는 효과를 흔히 볼 수 있다.이 효과는 어떻게 만들면 될까?Tailwind 문법으로 작성했다고 해서 일반 CSS와 다른 것은 없다.필자는 div -> img 순서로 감싸줬다.div는 이미지가 보일 크

2022년 8월 8일
·
0개의 댓글
·

[Tailwind] background-image의 linear-gradient 사용하기

CSS의 속성 중 background-image를 통해 linear-gradient를 사용할 수 있다.이는 이름 그대로 그라데이션 효과를 줄 수 있는데, Tailwind에서는 어떻게 사용하면 될까?사용법 자체는 공식 문서에 나와 있다. 그런데...원래는 % 단위를 활용

2022년 8월 7일
·
0개의 댓글
·

[React] NavLink 활성시 className 설정하기(ft. react-router-dom v6)

리액트로 프로젝트를 진행하다보면 react-router-dom을 사용하는 경우가 많다.그 중, NavLink는 해당 주소에 접근 중이면 특정 효과를 넣을 수 있게 해주는 기능이 있다.v6에서는 어떻게 적용할 수 있는지 알아보자!isActive를 사용하면 된다.to에 있

2022년 8월 7일
·
0개의 댓글
·

[Tailwind] 사용자 정의 애니메이션 추가하기

Tailwind를 사용해 프로젝트를 진행하던 도중, 애니메이션 효과를 넣고싶었다.그런데...공식 문서를 보니 애니메이션 종류가 꽤 한정적이다..!(v 3.1.7)즉, 커스텀해서 사용해야한다는 것인데...어떻게 해야할까?얼마전 포스트에서 Tailwind에 사용자 정의 색

2022년 8월 6일
·
0개의 댓글
·