# Tailwind CSS

42개의 포스트
post-thumbnail

Tailwind CSS

Tailwind CSS는 flex, pt-4, text-center, rotate-90 등 과 같은 클래스로 구성된 Utility-First CSS 프레임워크로 마크업에서 직접 모든 디자인을 구축할 수 있도록 구성되어 있습니다.

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

Tailwind CSS - daisyUI

https://tailwindcss.com/docs https://daisyui.com/components

2023년 2월 26일
·
0개의 댓글
·
post-thumbnail

Tailwind CSS

Utility-First(미리 세팅된 유틸리티 클래스를 활용하여 HTML 코드 내에서 스타일링)를 지향하는 CSS 프레임워크이다.장점은 스타일 시트를 오가는 컨텍스트 스위칭도 없고, 클래스 이름을 시맨틱하게 정하기 위해 고민하는 시간도 없다. 유지보수 측면에서도 CSS

2023년 2월 12일
·
0개의 댓글
·
post-thumbnail

DJ-folio 시동 걸기

바야흐로 설연휴였다. 빡센 코딩은 하고 싶지 않았고 아무것도 하지 않고 보내기엔 귀한 시간이다. 뭘할지 고민하다가 최근 유행(?)처럼 번지는 포트폴리오 웹페이지 제작을 하기로 결심했다. 기존에 노션에 생성한 포트폴리오가 있음에도 자체 제작하려는 이유는?

2023년 1월 27일
·
1개의 댓글
·

[ Tailwind + Styled Component ] 0. 알아보기

Tailwind CSS는 HTML 태그에 유틸리티 클래스를 바로 작성하여 스타일링한다. 이 때문에 클래스명이 길어져 컴포넌트의 JSX코드가 지저분해진다.Styled-components를 사용하면 CSS-in-JS 문법 사용으로 컴포넌트를 깨끗하게 유지할 수 있다.Tai

2023년 1월 27일
·
0개의 댓글
·

[ Tailwind + Styled Component ] 1. 세팅하기 (CRA)

Tailwind CSS는 HTML 태그에 유틸리티 클래스를 바로 작성하여 스타일링한다. 이 때문에 클래스명이 길어져 컴포넌트의 JSX코드가 지저분해진다.Styled-components를 사용하면 CSS-in-JS 문법 사용으로 컴포넌트를 깨끗하게 유지할 수 있다.Tai

2023년 1월 27일
·
0개의 댓글
·
post-thumbnail

Next.js 프로젝트 만들기(with. Tailwind CSS)

🚪 들어가며 프로젝트를 시작하기 앞서 Next.js와 Tailwind CSS가 무엇인지 알고 시작하자! - Next.js는 React 프레임워크이다. - Tailwind CSS는 CSS 프레임워크이다.

2023년 1월 3일
·
0개의 댓글
·

[Tailwind CSS] twin.macro 설치 하기 with react / next

twin.macro npm 문서 twin.macro는 emotion 또는 styled-componet Lib에 대해 의존성을 가집니다. 그렇기 때문에 설치를 하기 위해선 다른 Lib를 설치할 필요가 있습니다. 또한, 약간의 babel 설정 추가가 필요합니다. 공식

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

[Tailwind CSS] TailwindCSS 기능 및 CSS in JS

TailwindCSS의 기능 공식문서 core-concepts 공식문서 Adding-Custom Styles 공식문서 flex 테일윈드에서 core-conepts로 소개하는것중 몇가지로, 반응형, 다크모드, Hover등의 state에 따른 style등을 사용하여 하

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

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

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

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

Notion Project_2

오늘 다크모드의 궁금증이 풀렸다 . 그 이유는 ThemeProvider 에 attribute를 빼먹었기 때문이다. 내가 분명 초기 세팅할때 > module.exports = { darkMode = "class", } 이렇게 설정해두고, 이렇게 작성하는게 맞는데 attribute="class" 이 부분을 다 빼먹고 있었다. 다크모드 자체는 동작했...

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

Tailwind CSS

https://heokknkn.tistory.com/7

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

Tailwind CSS 사용해보기

요즘 핫한 CSS 프레임워크가 뭘까요? 라는 질문을 주시면 저는 당연히 Tailwind CSS라고 말씀드릴 것 같습니다.

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

8/1 32일차

처음 기획 단계에서 우리 팀은 css를 styled-component 를 사용하다가, 후에 tailwind 를 섞어서 쓰기로 했었다.배포 후 피드백 및 버그를 고친 후 전체적으로 tailwind css로 적용시키기로 했다.Tailwind 공식문서

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

CSS 프레임워크

CSS 전처리기는 우리(개발자)에겐 CSS보단 친화적이지만 브라우저가 해석하지 못하는 언어로 작성된 스크립트를 별도 플러그인과 프레임워크를 통해 우리가 아는 CSS로 변환하는데 사용한다. 기존 CSS의 단점인 유지보수의 불편함 등을 보완한다.Sass는 기본적으로 SAS

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

JS Mini projects - AOS Library

tailwind template, AOS Library 사용법

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

UI 구현을 쉽고 빠르게! Tailwind CSS

개발자들은 UI를 손쉽게 구현하기 위하여 CSS 프레임워크를 사용합니다. 그 중에 Tailwind CSS에 대해 이야기해보도록 하겠습니다!

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

[Tailwind CSS] vscode 플러그인

html 작성 시, 입력한 문자로 시작하는 클래스명들을 보여준다.vscode에서 tailwind 클래스명들을 속성별로 검색 확인할 수 있다.이와 비슷한 플러그인으로는 Tailwind Docs가 있는데, 이는 vscode에서의 바로 확인은 아니고, 검색한 클래스의 설명이

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