#tailwindcss

react 모바일웹 헤더가 Safari 상단 url 바 가림 현상

React / typescript / tailwindcss 헤더를 fixed / sticky로 고정을 해서 크롬에서는 잘 적용됬는데 아이폰 safari 브라우저에서 설정 - 단일탭으로 하고 들어가면 첨부파일처럼 상단 URL 바를 제 헤더가 가려버리는 현상이 나옵니다. index.html에 아래 속성도 추가된 상태입니다ㅠㅠ <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> 저와 비슷한 현상인 분 계실까요??

NextJS 14 project 시작 단계에서 에러가 발생했어요... 최대한 빠른 답변 부탁드립니다.

npx create-next-app 라는 명령어로 프로젝트를 시작했는데요. 아무것도 건들이지 않은 상태에서 app/layout.tsx 파일을 클릭했는데 맨 위에 에러가 발생해져 있더라구요.. 내용을 보니깐 Parsing error: __classPrivateFieldGet(...).at is not a function eslint 이런 에러가 있고 해당 에러가 tailwindcss.config.ts 파일 맨 윗줄에도 발생해져 있습니다. 어떻게 해야하는 건가요..?

tailwindCss ::before ::after 어떻게 사용하시나요??

안녕하세요. 질문있습니다.
 nextjs14 + tailwindCss 구조의 프로젝트를 진행중입니다.
 ::before와 ::after를 사용할 일이 많은데, tailwind에서 before 사용할 때 속성 하나하나에 before:*를 작성하는 방법 말고
 조금 더 편한 방법 없을까요??

NextJS13 모바일 구분 및 기술 문의

안녕하세요 nextjs13 으로 프로젝트를 진행할려고 하면서 문의 사항이 있습니다. 전제 조건으로 하이브리드앱으로 구현 예정이며, 웹뷰 방식으로 웹, 앱을 같이 사용할려고 합니다. (레이아웃을 웹, 앱 별도 구성 예정) 궁금한게 많아서 질문이 많이 있네요. 전문가분들 도움 부탁드립니다. 1. react-device-detect 모바일 여부를 구분하여 레이아웃을 구성할려고하는데, MobileView의 경우 use client 에서만 작동되는 것같습니다. MobileView을 사용하여 ssr 사용은 불가능한건가요? 2. style-component nextjs12 에서는 style-component를 사용되었는데 13으로 올라가면서 css-in-js방식을 사용 못하는것으로 보이며, tailwindcss, postcss를 권장하는걸로 보이는데 맞나요? 추가로 style-component 를 use client로 사용할 경우 하위에 들어가는 컴포넌트들이 다 csr 형식으로 되는게 맞는건가요? 3. RCS(React Server Components) children 으로 화면을 넘겨서 사용하는데 중간에 use client 를 사용하면 하위도 csr 형태로 인식이 되는건지 문의 드립니다. 감사합니다.

프론트엔드 개발자가 되고싶어요..

안녕하세요 저는 대학교4학년 재학중인 학생입니다. 공대생이지만 컴퓨터쪽은 아니구요 저는 노마드코더를 통해서 공부를 시작했습니다 제가 할수있는건 html,css,javascript,typescript,react정도가 있습니다 상태관리는 recoil을 사용해봤고, 스타일링은 styled-components랑 tailwindcss를 사용해봤고 지금은 거의 tailwindcss만 사용중입니다. 핑계라면 핑계일수도 있겠지만 저는 아직 한번도 cs, 알고리즘 공부를 해본적이 없습니다 그냥 코딩을 하는게 좋아서 이 쪽 꿈을 꾸게되었습니다 그래서 막 알고리즘 cs공부 같은건 하지않고 매일 뭔가를 만드는데만 몰두했습니다(학교 일주일에 두번 가는거빼고 평일 주말엔 코딩만 합니다) 그런데 이제 졸업을 하고 취직을 할려고 하니 이때까지 만들었던 것들은 포트폴리오로 제출하기에는 사실 너무 그때그때 만들어보고싶거나 구현해보고 싶은거 위주로 하다보니 지금부터 새로 만들어야할거 같구요.. 이제 cs, 알고리즘도 공부를 시작해야할거같은데 어디서부터 어디까지 공부를 해야할지도 잘 모르겠고 입사를 하기위해서 무엇을 준비해야할지도 잘 모르겠네요 사실 cs,알고리즘을 공부할수록 이게 필요한건지도 잘 모르겠고 제가 좋아하던게 멀어저만 가는거 같아요.. 프로젝트 하나 더 제대로 만드는게 좋을거 같기도 하고 잘 모르겠어요 어떻게 해야할지.. 물론 대기업을 가면 좋겠지만 아니여도 괜찮아요 그냥 코딩을 계속해서 할 수있고 배울게 많은 곳이면 좋을거 같은데 어떻게 준비를 해야할까요..? 긴글 읽어주셔서 감사합니다!!

TailwindCSS 는 왜 '프레임워크'인가요?

Scss 는 css 전처리기라고 불리고 styled-components 는 (CSS in JS 개념) 라이브러리 인데, Tailwind CSS 는 왜 '프레임워크'라고 불릴까요? 라이브러리와 프레임워크의 차이에 대해서는 알겠는데, Tailwind 는 어떤 이유로 '프레임워크'라고 불리는지 잘 모르겠습니당! ㅜㅜ

CSS 프레임워크를 현업에서 적절하게 사용하는 부분이 궁금합니다.

안녕하세요. 이번에도 도움만 받는 주니어 프론트엔드 개발자 입니다. 금일의 고민은 css 프레임워크의 활용입니다. 그동안은 CSS 적응력을 기르기 위해서 구성되어있는 bootstrap이나 mui 말고, styled-components, tailwindcss 정도로 개발을 진행해왔습니다. 이 부분이 더 커스텀하기에 용이하기도 해서 말이죠. 이번에 현업에서 개발을 들어가게 되었는데, 빠른 진행력을 위해서 어느정도 레이아웃까지는 CSS 프레임워크의 간편함을 빌려야되겠다는 생각이 문득 들게 되었습니다. 여기서 궁금한 부분은 CSS 프레임워크를 사용하여 다른 컴포넌트까지 빠르게 만들 수 있으나, 기획과 디자인의 용도에 맞는 커스텀 제작에 어려움을 겪을 수도 있을 것 같고 또한, 용량으로 인해 사용자 경험이 저하될까봐 우려가 됩니다. 하지만, 속도도 포기할 순 없단 말이죠? 선배 개발진분들의 현업에서 빠른 UI 제작을 위한, 그리고 모든 요구사항과 최대한의 최적화를 고려한 CSS 활용에 대한 팁을 듣고 싶습니다. 괜찮으시다면, css 프레임워크를 추천을 해주시면 더욱 감사할 것 같습니다 :) 감사합니다. 아! 참고로 Nextjs 를 사용하여 제작할 예정입니다. next 초기 설정에서 tailwindcss 를 밀어주는 느낌이 없지 않아 있어서 마음이 흔들립니당

TailwindCSS는 현업에서 잘 안쓰나요?

Styled Components랑 SCSS도 써보고 했지만 TailwindCSS 한 번 맛보고는 저는 무조건 개인 프로젝트할 때 TailwindCSS를 쓰는데요, 정말 편해서 아주 애용하는 기술입니다. 그런데, 채용 공고에서 보이는 대부분의 기업이 Styled Components가 1순위고 그 다음은 Emotion이나 SCSS더라구요. Tailwind를 거의 본 적이 없습니다. Styled Components나 SCSS를 현업에서 사용하시는 분들은 TailwindCSS에 대해서는 좀 부정적인 이미지가 있는 건가요? 면접 볼 때마다 TailwindCSS에 대한 질문을 받곤 하는데, Styled Components 쓰는 기업 상대로 '나는 Tailwind가 너무 좋더라 이런 좋은 점이 있다' 이런 얘기하니까 괜한 얘기나 하고 있는 거 아닌가 하는 고민만 자꾸 드네요.

TailwindCSS가 Next.js Pre-Rendering 에서 동작하지 않아요

Next.js 13.4 에 App directory 를 사용 중입니다. Pre Rendering 된 결과물에서 보면 TailwindCSS 가 적용되어있지 않네요. 원래 동작이 이런건지? 아니면 별도의 설정 방법이 있는건지 궁금합니다. https://shubhamverma.me/blog/server-side-rendering-of-tailwind-css-styles-in-next-js 이 방식을 사용해봤는데 되지 않네요 ㅜ

tailwindcss와 styled component 동시에 사용하셨던 분 계신가요?

제곧내입니다. nextui 프레임워크가 예뻐보이는데 tailwind 사용하면 좀 더 편할 것 같아서 둘 다 설치했는데요, nextui의 코드 복사 후 붙여넣으니 충돌이 나더라구요 ㅠㅠ 혹시 이런 방법은 좋지 않은 방법인가요..?

박스 사이징이 고정되어있는데 바꿀 수 없나요?

간절합니다 ㅠㅠ... Next.js(Typescript)와 TailwindCSS를 활용하여 웹사이트를 만들고 있었는데 처음이라 미숙해서인지 아직 실수가 많습니다. 저기 붉은색 박스와 파란색 박스가 화면에서 100%로 되었으면 하는데 지금 계속 화면 크기를 줄이면 저 현상이 일어납니다... 아직 초보라 많이 미숙한데 해결 방법이 있나요?

style.css와 tailwindcss 관련 질문!

style.css는 모든 부분에서 잘 적용되는데 tailwindcss에서 color이나 size 등의 요소는 적용이 안되더라구요.. 제 생각엔 우선순위 문제일 수도 있을 것 같은데.. tailwindcss의 우선순위를 결정하려면 class의 우선순위도 고려해야 하나요?

react 오픈소스 UI 라이브러리 쓰시나요?

이번에 사이드 프로젝트에 새로 합류하게 되었는데, 전임 프론트 개발자 분이 Ant Design을 적용해놓고 가셨더라고요. 프로젝트 코드도 다 Ant Design 컴포넌트들로 적용이 된 상태입니다. 저는 사실 회사에서 이런 UI 라이브러리를 써본적은 없고 bootstrap 이나 tailwindcss로 구현된 내부 컴포넌트들 밖에 안 써봤는데요. 혹시 실제 사용하는 서비스에서도 Ant Design 같은 UI 라이브러리를 사용하는지 궁금합니다! 추가로 최근 Storybook을 잠깐 봤는데, 이거는 UI 라이브러리인가요?

Next.js Image에 스타일 적용 방법

안녕하세요! Next.js Image 컴포넌트에 tailwindcss로 스타일을 씌우려고 하는데 스타일 적용 방법이 있는지 궁금합니다! Image 컴포넌트에 classname으로 적용이 안되는 것 같아서요 :)