테일윈드

tailwind transform:translate(-50%,-50%)

2022.09.30

일반 css 속성 중 position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)를 쓸 일이 많다. position: absolute; display: block; top: 50%; left: 50%; transform: translate(-50%, -50%); tailwind에서는 transform:translate(-50%,-50%) 를 아래처럼 쓸 수 있다 className="transform absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] transform"

카테고리 없음

tailwind custom color 설정, 테일윈드 커스텀 컬러 지정

2022.07.07

테일윈드 커스텀 컬러 지정은 공식문서에 친절히 나와있지만. 나같은 입문자는 공식문서를 봐도 끝없이 헤맨다 .. 사용자 지정 컬러 테마를 만들어 보자. tailwind.config.js module.exports = { content: [ "./src/**/*.{js,ts,jsx,tsx}", ], theme: { extend: { colors:{ header_black: { black: "#30363A", white:"#fff", }, }, fontFamily: { sans: ['Roboto'], }, }, }, plugins: [], } custom color설정할때 주의점은 꼭 theme: { extend: { colors 로 써야한다는 것이다. extend 괄호 안에 들어가도록 유의하자. 그리고 co..

tailwind transform:translate(-50%,-50%)

tailwind custom color 설정, 테일윈드 커스텀 컬러 지정

티스토리툴바