Remix Framework TailwindCSS Dark Mode, 다크 모드 안녕하세요? Remix Framework에 TailwindCSS를 적용하는 방법을 저번에 배웠는데요. https://cpro95.tistory.com/674 Remix Framework에 TailwindCSS 적용하기 안녕하세요? 오늘은 Remix 프레임워크에 TailwindCSS를 적용시켜 보겠습니다. 먼저, 지난 시간까지 만든 remix-tutorial 폴더에서 다음과 같이 tailwindcss와 concurrently를 설치해 보겠습니다. npm i -D tailwin.. cpro95.tistory.com 오늘은 다크 모드 적용에 대해 알아보겠습니다. TailwindCSS의 다크 모드의 작동원리는 즉, html 태그에 ..
안녕하세요? 오늘은 Remix 프레임워크에 TailwindCSS를 적용시켜 보겠습니다. 먼저, 지난 시간까지 만든 remix-tutorial 폴더에서 다음과 같이 tailwindcss와 concurrently를 설치해 보겠습니다. npm i -D tailwindcss@latest concurrently 이제 tailwindCSS init을 실행시켜 볼까요? npx tailwindcss init Remix 프레임워크에서는 postcss가 필요 없어 뺐습니다. 이제 tailwind.config.js 파일을 아래와 같이 고쳐볼까요? module.exports = { content: ["./app/**/*.{ts,tsx,js,jsx}"], theme: { extend: {}, }, plugins: [], }; ..
안녕하세요? 오늘은 TailwindCSS 3.0과 Next.JS에서 다크 모드(Dark Mode) 적용하는 방법에 대해 알아보겠습니다. 먼저, 빈 템플릿을 설치해 볼까요? npx create-next-app tailwind-dark-mode 열심히 설치하고 있네요. 이제 TailwindCSS 최신판을 설치해 봅시다. cd tailwind-dark-mode npm i -D tailwindcss@latest postcss@latest autoprefixer@latest TailwindCSS는 postcss와 autoprefixer 패키지가 필요합니다. 같이 설치해주셔야 합니다. 그다음에 TainwindCSS 초기화 명령을 실행시킵시다. npx tailwindcss init -p TailwindCSS 초기화 ..
안녕하세요? 얼마전부터 Tailwind CSS 강좌를 이어 가고 있는데요. 처음에는 어려웠지만 계속 도전해 보니까 예전에 배웠는 HTML + CSS 지식이 다시금 살아나서 좋았습니다. Tailwind CSS 의 장점은 본인의 상상이 그대로 UI로 이어진다는데 있는거 같습니다. 앞으로 Tailwind CSS를 이용한 나만의 UI 라이브러리를 구축해 볼까 합니다. 그래서 지난번에 만들었던 Top Navbar 글의 후속편인데요. https://cpro95.tistory.com/531 Tailwind css 반응형 메뉴 navbar 만들기 안녕하세요? 오늘은 지금까지 쭉 관심있게 지켜본 Tailwind CSS 에 대해 공부해 볼까 합니다. Tailwind CSS 가 최근 가장 핫한 CSS 유틸인데요. React..
안녕하세요? 오늘은 지금까지 쭉 관심있게 지켜본 Tailwind CSS 에 대해 공부해 볼까 합니다. Tailwind CSS 가 최근 가장 핫한 CSS 유틸인데요. React 로 UI 디자인은 보통 Material-UI, Bootstrap, Ant Design 등으로 많이 만드는데요. 최근에는 좀더 가벼운걸 찾는 추세라 Tailwind CSS 가 뜨고 있습니다. Tailwind CSS 는 일반적으로 CSS 헬퍼 유틸(Helper Utilities)이라고 하는데요. 예를 들어 일반적으로 CSS로 마진을 부여할 때는 margin-right : "20px" 이렇게 쓰는데요, Tailwind CSS에서는 좀 더 간편하게 줄여서 다음과 같이 씁니다. mr-10 헬퍼 유틸이라 줄임말이 많습니다. 그래서 처음에는 헷..