DownloadLoginSign Up
Click to apply the changed page
개발자들이 좋아하는 소식을 나눠봐요 👨🏻‍💻
Created at10 25, 2021
#밈 mentioned
WWDC 22 요약
지난밤 있었던 WWDC의 키노트 내용 정리입니다.
영상을 더 좋아하시는 분들은 아... more
2 comments
#IT소식 mentioned
tailwindcss 3.0 알파 미리보기!
요약
postcss, tailwindcss 환경 세팅 없이 HTML 문서에 <head /> 블록에 <script src="https://cdn-tailwindcss.vercel.app/ "></script> 만 추가 하면 tailwindcss 를 바로 사용할 수 있음
CDN 링크는 정식 출시 때 변경될 수 있음
확실한 주소는 아니기 때문에 테스트용으로 사용 권장
`text-[#5e1ec7]` 같은 JIT-mode 를 바로 사용할 수 있음
tailwindcss config 는 <script>tailwindcss.config = {}</script> 에서 설정 할 수 있음
tailwindcss plugins 는 파라미터로 불러올 수 있음 <script src="https://cdn-tailwindcss.vercel.app?plugins=typography@0.4.1,forms"></script>
@0.4.1 을 추가해서 원하는 버전을 불러올 수 있음
쉼표로 구분해서 여러가지 플러그인을 불러올 수 있음
클래스명들을 추상화하고 싶을 때 <style type="text/tailwindcss"></style> 블럭으로 별도의 tailwindcss 스타일을 입력할 수 있음.
7 comments
Let's chat!
    오 저희는 emotion을 사용해서 tailwind는 사용해보지는 않았는데 대부분 쓰시는 분들의 만족도가 높더라구요! css-in-js와 결합해서 사용하는 유즈케이스도 여럿 있는것 같습니다 ㅎㅎㅎㅎ 디자인 시스템을 모듈화 하기 수월하겠네용 +_+ @제이슨
    파워제이드
    Nov 23, 2021
    @바라밥 디자인 시스템을 구축할 때 tailwindcss 의 기본 디자인 토큰과 반대로 진행이 되는 경우 config 파일의 줄 수가 굉장히 많아질 수 있어서 작업이 짜칠 수 있습니다. tailwindcss 을 사용하려면 방향성에 공감하는 디자이너와 협업을 해야하겠더라고요.
    @파워제이드 역시 커스터마이징이 난관이군요 ㅠㅠ 경험 공유 감사드립니다
    파워제이드
    Nov 23, 2021
    @바라밥 맞습니다! 그래서 개인 프로젝트에 많이 쓰고 있어요! 너무 좋아요! ㅎㅎ
    제이슨
    Nov 23, 2021
    우와!! 좋은 정보 감사합니다~~ 양질의 요약까지!!!!
    tailwind 는 처음 들어봤는데, bootstrap 과 비슷한 종류인가요?
    파워제이드
    Nov 23, 2021
    @제이슨 완전히 달라용! 유틸리티 우선 CSS 프레임워크에요. CSS 파일 없이 원자단위의 클래스들을 조합하여 UI 컴포넌트를 표현할 수 있겠더라고요. CSS 용량을 줄이고 디자인 시스템의 토큰이 미리 정의 되어 있어 CSS 용량과 디자인 시스템을 고민하시는 분들이 사용하기 편한 것 같아요!
    제이슨
    Nov 23, 2021
    @파워제이드 님이 소개해주신 덕분에 궁금해서 홈페이지에도 가봤는데 좋아 보이네요. 토이프로젝트 하면 써보고 싶어요.