# tailwindCSS

85개의 포스트
post-thumbnail

[Tailwind CSS] 소개 및 설치하기 with React

공식문서TailwindCSS는 CSS 프레임워크입니다.아래와 같은 사진을 보면, TailwindCSS는 다른 CSS 프레임 워크에 비해서 만족도와 사용량이 급속 성장하고 있다는것을 알 수 있습니다.이러한 결과를 바탕으로, 카카오등을 포함한 많은 기업들이 Tailwind

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

react 프로젝트에 tailwind css 적용 (create-react-app 안씀)

대부분 공식 문서를 참고 하여 진행을 하였는데 알아 보기 쉽게 정리해 두려 한다.참고 : https://tailwindcss.com/docs/guides/create-react-app1\. tailwindcss 설치 npm install -D tailwindc

7일 전
·
0개의 댓글
·

Next.js 13 + tailwindcss 초기세팅하기

이번에 회사에서 리뉴얼 프로젝트가 시작되어 Next.js 신규 버전인 13버전과 더불어기존에 사용하고 있던 MUI css라이브러리를 사용하지 않고, tailwindcss로 작업을 하기로 했다.기존 프로젝트에서는 Next.js를 썼지만 getStaticProps, get

2022년 11월 20일
·
0개의 댓글
·
post-thumbnail

flex의 함정

스타일을 줄 때 오브젝트를 가로로 배열하기 위해 flex를 자주 사용하는 편인데, 매번 flex, flex-direction, justify-content, align-items만 주구장창 썼지 flex에 어떤 속성이 더 있는지 찾아본 적이 없는 것 같다.Tailwin

2022년 11월 17일
·
0개의 댓글
·
post-thumbnail

팀 프로젝트 스터디 2주차) 컴포넌트 스타일링

styled-components 각 컴포넌트 파일 내에서 HTML 태그에 자바스크립트의 템플릿 리터럴을 사용해서 컴포넌트를 스타일링할 수 있게 하는 라이브러리이다. 는 다양한 장점들이 존재한다. > CSS 코드 관리에 용이하다. 쉽게 생성하고, 지울 수 있다. 기존에

2022년 11월 16일
·
1개의 댓글
·
post-thumbnail

Next.js 뽀개기 #6

포트폴리오 배포하기 (짱쉬움)

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

PJH's Game World - setting

React에 Typescript을 적용하는 방법을 배웠고, 이제 tailewind CSS를 이용하여 UI를 구현하고 Docker를 이용해 배포까지 해보자!CRA 없이 웹팩을 이용하여 React와 TS 프로젝트를 생성하는 것은 이미 해보았다!참고하자! 👉 React +

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

📆 22.11.06 - TS + Tailwindcss => Carousel

저번 Kroom (Kream) 프로젝트 때 요한님이 타입스크립트와 Tailwind로 Carousel를 만드시는 모습을 보고 감명을 받아끈질기게 따라붙어 비법을 배워왔었다..! 타입스크립트와 Tailwind에 빠르게 익숙해짐과 동시에 현재 진행중인 큰 규모의 프로젝트에

2022년 11월 6일
·
0개의 댓글
·
post-thumbnail

Next.js 뽀개기 #5

프로젝트 화면 꾸미는 중 🎨 + target="_blank"?

2022년 11월 5일
·
0개의 댓글
·
post-thumbnail

Next.js 뽀개기 #4

Nex.js 데이터 가져오기 (Notion API 연결)

2022년 11월 3일
·
0개의 댓글
·

React, Tailwind CSS, Daisy UI로 다크모드 만들기

프로젝트 생성 프로젝트를 생성하고자 하는 디렉토리로 이동하여 다음과 같이 입력하여 Create React App으로 프로젝트를 시작한다. Tailwind css 설정 tailwind css 설정을 위해 다음과 같이 입력한다. 그 결과로 postcss.config.j

2022년 11월 3일
·
0개의 댓글
·
post-thumbnail

redux-toolkit와 redux-saga로 로그인, 로그아웃(next.js, tailwindcss)

오류의 원인 : loginRequest -> loginSuccess로 넘어가는 과정에서 로그인 화면 -> 로그인 완료 창이 나오게 했어야 함 문제점 : 로그인 완료 창이 loginSuccess에서 나와야 하는데 loginRequest에서 나옴 [userSlice.j

2022년 11월 3일
·
0개의 댓글
·
post-thumbnail

Next.js 뽀개기 #3

Link, 다크모드 작업

2022년 11월 2일
·
0개의 댓글
·
post-thumbnail

typescript와 tailwindcss로 티스토리 스킨 개발하기 (feat.webpack)

티스토리 스킨 적용에 필요한 파일에는 index.xml, skin.html, style.css, script.js가 있습니다. 이 파일들을 빌드하기 위해 개발 환경을 세팅해보았으며, 이에 대한 적용기를 적어보려 합니다.

2022년 11월 2일
·
0개의 댓글
·
post-thumbnail

Next.js 뽀개기 #2

기본 레이아웃 만들고 tailwindCSS 적용하기

2022년 11월 1일
·
0개의 댓글
·
post-thumbnail

Next.js 뽀개기 #1

Next.js로 포트폴리오 사이트 만들기 (with 노션)

2022년 10월 31일
·
0개의 댓글
·
post-thumbnail

[Next.js, Tailwindcss] 스플래툰3 홈페이지 클론코딩

스플래툰 3 홈페이지 클론 코딩

2022년 10월 28일
·
0개의 댓글
·
post-thumbnail

navbar관련 tailwindcss 정리(next.js)

참고 : https://goddino.tistory.com/179 tailwindui https://tailwindui.com/components/preview tailwindcss https://tailwindcss.com/docs/margin vue에서는 c

2022년 10월 27일
·
0개의 댓글
·

TailwindCSS #6 | Form Modifier (group, peer)

컨터이너, 래퍼 박스에 group 클래스네임을 줍니다.해당 박스에 Hover 되었을때 변화를 주고 싶은 태그 클래스네임에 group-hover:bg-red-300 과 같이 줍니다.변화를 주고싶은 클래스네임에 transition-colors 를 적어주면 transitio

2022년 10월 21일
·
0개의 댓글
·

NextJS + Typescript + TailwindCSS 셋업하기

NextJS + Typescript를 설치해줍니다. 현재 폴더 하위에 프로젝트명 폴더가 생성되니 원하시는 위치에서 커맨드를 사용하면 됩니다.아래와 같이 프로젝트명을 물어봅니...

2022년 10월 17일
·
0개의 댓글
·