Tailwindcss 테마 설정 및 스크린 사이즈 변수 설정
테마 설정/** @type {import('tailwindcss').Config} */module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}", ], // 이 부분에 추가 darkMode: 'class', theme: { extend: {}, }, plugins: [],} import React, { useEffect } from 'react'// 버튼 클릭할 때 마다 다크/라이트 모드 변경const ModeCtrl = () => { return ( setDarkMode(!darkMode)}> 버튼 )}export default ModeCtrl 스크린 사이즈 변수 설정https://tailwin..
2024. 8. 2.
React 에서 Tailwinds 에 custom-font 적용법
작업중인 폴더의 tailwind.config 파일을 아래와 같이 수정/** @type {import('tailwindcss').Config} */module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}", ], theme: { extend: {}, // 이 부분을 수정 fontFamily: { primary: "Noto Sans KR, sans-serif", // css서 사용할 폰트명: "사용할 폰트" }, }, plugins: [],} css 적용은 아래처럼 가능import React from 'react'const App = () => { return ( 기본 폰트 ..
2024. 7. 31.
