tailwind nth-child 적용하기. fitst-child 축약어: first:속성 nth-last-child는 xl사이즈일경우 이렇게 쓴다. xl:last:w-[588px] nth-child(4)번째를 선택한다면 [&:nth-child(4)]:md:w-[337px] 반복되는 컴포넌트이지만 태블릿(768px)일때부터 달라질 경우 nth-child 지정을 해서 상황에 맞게 조절할 수 있었다. 모바일일땐 세로, 768부터 nth-child(4), nth-child(5) (last-chlid)일 경 react + tailwind 조합이라 className안에 속성을 썼다. {cardContent?.map((item, index) => { return ( {item.text} ); })} const ca..
일반 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.config.js 에 폰트 테마를 설정했다. module.exports = { future: { removeDeprecatedGapUtilities: true, purgeLayersByDefault: true, }, content: ['./src/**/*.{js,ts,jsx,tsx}'], darkMode: 'class', theme: { extend: { screens: {}, colors: { white: '#FFFFFF', mainColor: '#004C7E', subColor: '#F5F5F5', newsContent: '#757575', headerFooterColor: '#30363A', header: { blackbg: '#30363A', white: '#fff', }, }, ..
테일윈드 커스텀 컬러 지정은 공식문서에 친절히 나와있지만. 나같은 입문자는 공식문서를 봐도 끝없이 헤맨다 .. 사용자 지정 컬러 테마를 만들어 보자. 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..
