tailwindcss 바삭바삭하고 간단한 결제 페이지 만들기 먼저 Next.js에서 프로젝트를 만듭니다. Vercel & Next.js가 매우 편하기 때문에 최근에는이 구성을 사용하고 있습니다. 그런 다음 Tailwind CSS를 넣습니다. Tailwind CSS를 사용하면 클래스 주위가 엉망입니다. class명을 생각하거나라든지, 하지 않아도 좋기 때문에 다르~ 하고 싶으면 매우 좋습니다. 여기를 살펴보고 Next.js 프로젝트에 Tailwind C... 스트라이프Reactnext.jsVerceltailwindcss [Laravel7.x] Tailwindcss를 설치하고 아이콘에 FontAwesome 사용 최신 tailwindcss 문서에는 Laravel에 설치하는 방법이 있습니다. 다만, 보는 한 이 문서가 상정하고 있는 버젼은 Laravel8과 같기 때문에, 그 이전의 버젼이라고 문서대로에 해도 잘 되지 않습니다. (webpack.mix.js의 설명이 다르기 때문에). 그래서 이전 버전의 Laravel이라면 조금 쓰는 방법을 바꿔야합니다. 여기에서는 제가 주로 사용하고 있는 laravel7... Laravel7라라벨tailwindcssFontAwesome Tailwind의 Flexbox 조견표 flexboxRailstailwindcss슬림 라이브러리 없이 세련된 컬러 피커를 구현하는 【React】 <input type="color" /> 를 사용하면 컬러 피커 (사용자에게 색상을 선택하게하는 UI)를 쉽게 구현할 수 있습니다. 외형이 너무 귀여워… 그렇게 생각해, 여러가지 시험해 디자인하는 방법을 짜내었으므로 남겨 둡니다. input 태그에 opacity: 0;를 설정하여 투명하게 만들고 div 태그로 둘러싸고 디자인합니다. React+TypeScript+TailwindCSS로 이번은... HTMLCSSReacttailwindcss 【React와 Next.js의 학습 방법】fwywd(퓨드) 채용 1차 시험을 css도 위험한 초보자가 학습한 흐름 fwywd(퓨드)의 채용 시험에 도전하고 싶지만, 써 있는 내용이 주문으로밖에 보이지 않는다. React · Next.js · tailwindcss · Vercel? 프로그래밍 초보자나 같은 생각을 하고 있는 사람의 도움이 되면 기쁩니다. 시험 내용을 파악하고 싶다 React 나 Next.js 등을 잘 모르겠습니다 React: HTML의 외형을 만들 수 있다. HTML에 변수를 전달할 수 있... Reactnext.jsVerceltailwindcssfwywd Tailwind에서 파란색 프레임을 지우는 방법 Tailwind를 사용하면 버튼을 누를 때 파란색 테두리가 나옵니다. 설정하지 않아도 마음대로 나오므로 지우는 방법을 찾았습니다. tailwind.css 아래의 코드를 주석 처리합니다. 수정 전 tailwind.css 수정 후 tailwind.css 이제 파란색 프레임이 사라졌습니다. 수수함에 신경이 쓰이므로, 사라져 좋았습니다!... React자바스크립트TypeScripttailwindcss Tailwind CSS에서 @tailwind를 작성할 때 VS 코드에서 오류가 발생하는 경우 ※2021/08/31 시점에 확인할 수 있던 동작이 됩니다. ・Node.js (16.8.0) 현재 Next.js, TypeScript 및 TailwindCSS로 프로젝트를 만들고 있습니다. 그 때 Tailwind CSS 셋업에서 공식이나 다른 기사를 참고하면서 하고 있으면, 타이틀과 같이 에서 import시에 에러가 표시되었습니다. styles/globals.css Unknown at rul... Reactnext.jsTypeScripttailwindcssVSCode tailwindCSS로 import되지 않습니다. 장식 설정이 반영되지 않는 문제를 해결합니다. Win10 Next.js VSCode 추가 2021년 10월 27일 정상적인 CSS 파일 경고가 사라지지 않을 때 VScode 확장 기능 를 넣을 수 있다. 추가 종료 추가 2021년 6월 10일 VSCode를 클린 설치(VScode 자체 외, VScode의 설정도 확장 기능도 모두 소거) styles/globals.css 물결선이 표시되고 그 위에 마우스 커서를 올려 놓으면, 새로 설치한 후 이 단계에서도 동일하게Unknown... next.jstailwindcssVSCodeWindows10 3분 안에 Nuxt.js(+TailwindCSS) + Storybook으로 Atomic Design하는 환경 만들기 이것은 Nuxt.js + Storybook의 환경을 만들고 싶지만 여러 가지 귀찮은 사람을 위해 만든 히나가타입니다. 우선 샘플용으로 Button 만 작성하고 있습니다. Git for Windows 또는 Terminal을 시작하고 작업 디렉토리에서 다음 명령을 순서대로 입력합니다. 마지막 명령의 실행이 끝나면 마음대로 브라우저가 기동할 것입니다만, localhost:3003 하지만 열 수 있... AtomicDesignVue.jsnuxt.jstailwindcssstorybook 【TailwindCSS】스크롤 바를 보이지 않게 한다 소개 평소 개발에서 TailwindCSS를 사용하고 있지만,이 스크롤 바를 지우고 싶습니다. CSS에서는 쉽게 구현할 수 있지만 TailwindCSS 표준으로 스크롤을 지울 수 없었습니다. (Tailwind라면 상당히 이런 일이 있다) 원래 코드 .tsx 구현 방법 TailwindCSS의 구멍은 styled-component를 사용하여 구현하는 것이 좋을 것 같습니다. 먼저 command로 ... tailwindcssReactnext.js Tailwind CSS의 purge를 개발 환경에도 적용 Next.js 프로젝트에 Tailwind CSS를 설치했습니다. 개발 환경에서 Tailwind CSS가 적용되었는지 확인했기 때문에 시험에 vercel에 배포하려고했습니다. 아래 그림과 같이 보이는 방법에 차이가있었습니다 개발 환경 프로덕션 환경 tailwind.config.js 에 기재되어 있던, purge 의 설정이 좋지 않은 모습.purge는 사용하지 않는 Tailwind CSS 스타일... tailwindcssnext.js Next.js+Tailwind에 Google 글꼴 추가 styles/globals.css tailwind.config.js about.jsx Tailwind CSS의 글꼴 설정을 사용자 정의합니다. 에 액세스하여 모든 글꼴의 을 가져옵니다. Next.js의 globals.css에 을 추가합니다. styles/globals.css tailwind에 글꼴 설정을 추가합니다. tailwind.config.js tailwind 형식으로 글꼴을 적용합니다... tailwindcssReactnext.js 마크다운을 tailwind css로 스타일링 사용 기술 Next.js Tailwind css react-markdwon 위 기술로 마크다운 스타일링 Tailwind css에서 기본 요소의 스타일링을 지우는 경우가 많습니다. 그대로라면 마크다운이 작동하지 않으므로 스타일링합니다. 마크다운에만 영향을 줍니다. (react-markdown에서 목차를 만든 가 있어, 그 다음부터 써 갑니다. Tailwind 관계없고, 보지 않아도 문제 없습니... tailwindcss마크다운Reactnext.js Next.js + TypeScript + Tailwind CSS 프로젝트의 환경 구축 절차 Next.js + TypeScript + Tailwind CSS 프로젝트의 환경 구축 절차를 정리했습니다. node와 npm은 설치가 끝난 것으로 가정합니다. 운영 환경 또한이 기사의 내용은 macOS (Apple Silicon)에서 실행됩니다. Windows를 이용하시는 분은 적당히 읽어 주시면 좋겠습니다. Next.js 프로젝트 만들기 (폴더가 생성되므로 작업 디렉토리 바로 아래에서 수행... 자바스크립트tailwindcssnext.jsMac Nuxt.js+Tailwind CSS에서 포트폴리오 사이트를 만들고 Netlify에서 공개 마지막 달부터 프리랜서 엔지니어로서 일하고 있습니다만, 일단 포트폴리오 사이트적인 것을 만들어 두는 편이 좋을까~라고 생각해 만들었습니다. 타이틀에도 있듯이, 과 를 사용해 개발해, 로 공개하고 있습니다. 이번은 간단하게, 사이트를 만드는데 있어서 이용한 기술에 대해 소개할까라고 생각합니다. Nuxt는 create-nuxt-app로 시작할 수 있으므로 편리합니다. 자신은 색 구성표에 을 사용... 포트폴리오Netlifynuxt.jstailwindcss tailwind 지원 Vue의 컴포넌트 라이브러리 여러분 tailwind 사용하고 있습니까? tailwind의 장점은, CSS를 쓰지 않고 클래스로 정의할 수 있으므로, CSS의 운용 코스트나 설계에 시간이 걸리지 않게 되는 것이군요. 한편, 그 반면에 Vuetify처럼 컴포넌트 준비해주지 않기 때문에, 상당히 1로부터 컴퍼넌트 작성하는 것이 많다고 생각합니다. tailwind 대응의 컴퍼넌트 없을까라고 생각해, 찾아냈지만 찾아내는 상당히 ... nuxtVue.jsnuxt.jstailwindcss webpack4에서 Tailwind CSS의 파일 크기를 줄이기까지 시도했습니다. Tailwind CSS 브라우저에서 로컬 이미지 파일을 읽고 연결하여 한 장의 이미지로 만드는 도구. webpack + Vue.js + Tailwind CSS. CSS 파일 크기 약 8KB. (보통 Minify했을 뿐이라면 600KB 정도가 됩니다.) 소스 코드의 파일 구성은 이런 느낌입니다. webpack은 이미 설치되어 CSS 로더와 Tailwind CSS를 설치합니다. CSS 파일을 외... purgecsswebpackpostcsstailwindcss Next.js에서 ReScript, tailwind 사용 샘플을 커맨드로 만들었을 때는 패키지의 버젼이 낡기 때문에 갱신한다. 에서 일괄적으로 ReasonML 형식(.re)에서 ReScript 형식(.res)으로 변환할 수 있다. 다음 두 개를 각각 다른 터미널 탭/창에서 실시 Tailwind는 CSS 프레임 워크 중 하나이며 Next.js에서 사용하는 방법이 때문에 일반적으로 따릅니다. style/main.css pages/_app.js tail... ReScripttailwindcssnext.js Next.js & Tailwind CSS 입문 Next.js의 입문편을 정리해 보았습니다. Next.js는 어쨌든 서버 측에서 실행되는 ReactJS입니다. 이것을 기억하면 서버 사이드도 프런트 엔드도 React의 느낌으로 쓸 수 있을 것 같습니다. 여기의 공식 문서를 참고로 했습니다. 먼저 yarn에서 React 프로젝트를 만듭니다. 프로젝트 이름은 기본 my-app이었습니다. 만든 프로젝트 내에서 yarn을 사용하여 다음을 설치합니다... ReactTypeScriptnext.js자바스크립트tailwindcss Next.js + TypeScript + Tailwind CSS 프로젝트 설정 절차 Next.js + TypeScript + Tailwind CSS 프로젝트 설정 절차를 요약했습니다. 또, 이번 기사는 macOS(Apple Silicon)에서 검증하고 있습니다. 먼저 create-next-app 명령을 사용하여 Next.js 템플릿에서 코드베이스를 만듭니다. 로그 보기: Creating a new Next.js app ... 명령이 완료되면 Next.js의 코드가 생성되었으... tailwindcssTypeScriptnext.js Tailwind CSS를 React 앱에 통합하는 방법 이 게시물에서는 create-react-app를 사용하여 반응 프로젝트를 생성합니다. 이렇게 하면 상대적으로 빠르게 코딩을 시작할 수 있도록 필요한 모든 것이 설정됩니다. 명령줄을 열고 다음 명령을 사용합니다. npmnpx create-react-app react-app-with-tailwindcd react-app-with-tailwind 실yarn create react-app react... tailwindcssjavascriptreactwebdev 가변 Google 글꼴로 NuxtJS 및 TailwindCSS를 설정하는 방법 단계별 가이드 VueJS 및 TailwindCSS를 기반으로 구축된 프레임워크인 NuxtJS를 사용하여 빠른 설정 프런트엔드 애플리케이션 보유 Google Fonts를 사용하여 초기 설정 및 부트스트래핑을 다룰 것입니다. 개발 시스템에 NodeJ가 설치되어 있지 않은 경우 을 참조하십시오. 위의 명령은 응용 프로그램을 시작하고 실행하는 데 필요한 파일을 가져옵니다. 나중에 사용할 필요가 없으... tailwindcssnuxtbeginnersgooglefonts TailwindCSS에서 삼각형을 만드는 방법 이 게시물에서는 테두리를 사용하여 TailwindCSS에서 삼각형을 그리는 네 가지 예제를 볼 것입니다. 삼각형은 기하학에서 가장 단순한 모양 중 하나입니다. 세 개의 직선과 두 개의 각으로 그릴 수 있습니다. 너비와 높이를 0으로 설정: w-0 및 h-0 전체 높이와 색상을 갖도록 위쪽 테두리를 다음과 같이 설정합니다. border-t-[75px] border-t-red-500 border... tailwindcsscsswebdevhtml Tailwind CSS 3 배지 예 이 섹션에서는 tailwind css 3으로 배지를 만들 것입니다. Tailwind CSS 3로 그림자, 배지 링 스타일로 배지를 만듭니다. 예 1 tailwind v3 단순 및 원형 배지. 테두리 스타일의 tailwind v3 배지. 예 2 링 스타일의 tailwind v3 배지. 그림자 스타일이 있는 tailwind v3 배지. 또한 읽기... tutorialtailwindcsswebdev Astro에 Vue 3를 설치하는 방법 이 섹션에서는 Astro에 vue 3을 설치합니다. 이 Astro 통합은 Vue 3 구성 요소에 대한 서버 측 렌더링 및 클라이언트 측 수화를 가능하게 합니다. css의 경우 astro가 Tailwind CSS를 쉽게 통합할 수 있으므로 Tailwind CSS를 사용합니다. 도구 사용 아스트로 Tailwind CSS(@astrojs/tailwind) 뷰 3(@astrojs/vue) 아스트로 ... astrotailwindcsswebdevvue Vite + Vue3 + Windi.CSS 환경 구축 Windi.CSS를 사용해보고 싶어서 Vite + Vue3 + Windi.CSS 로 환경 구축을 했으므로 순서를 정리했습니다. Windi.CSS에 대해서는 별도로 기사를 씁니다. 이번에는 npm을 사용하여 설치했습니다. 프로젝트 이름을 원하는대로 추가하십시오. (나는 windi-sample 했습니다) 라이브러리는 vue를 선택했습니다. ( vanilla 는 네이티브 JS 인 것 같습니다) 무... viteWindiVue.jsCSStailwindcss
바삭바삭하고 간단한 결제 페이지 만들기 먼저 Next.js에서 프로젝트를 만듭니다. Vercel & Next.js가 매우 편하기 때문에 최근에는이 구성을 사용하고 있습니다. 그런 다음 Tailwind CSS를 넣습니다. Tailwind CSS를 사용하면 클래스 주위가 엉망입니다. class명을 생각하거나라든지, 하지 않아도 좋기 때문에 다르~ 하고 싶으면 매우 좋습니다. 여기를 살펴보고 Next.js 프로젝트에 Tailwind C... 스트라이프Reactnext.jsVerceltailwindcss [Laravel7.x] Tailwindcss를 설치하고 아이콘에 FontAwesome 사용 최신 tailwindcss 문서에는 Laravel에 설치하는 방법이 있습니다. 다만, 보는 한 이 문서가 상정하고 있는 버젼은 Laravel8과 같기 때문에, 그 이전의 버젼이라고 문서대로에 해도 잘 되지 않습니다. (webpack.mix.js의 설명이 다르기 때문에). 그래서 이전 버전의 Laravel이라면 조금 쓰는 방법을 바꿔야합니다. 여기에서는 제가 주로 사용하고 있는 laravel7... Laravel7라라벨tailwindcssFontAwesome Tailwind의 Flexbox 조견표 flexboxRailstailwindcss슬림 라이브러리 없이 세련된 컬러 피커를 구현하는 【React】 <input type="color" /> 를 사용하면 컬러 피커 (사용자에게 색상을 선택하게하는 UI)를 쉽게 구현할 수 있습니다. 외형이 너무 귀여워… 그렇게 생각해, 여러가지 시험해 디자인하는 방법을 짜내었으므로 남겨 둡니다. input 태그에 opacity: 0;를 설정하여 투명하게 만들고 div 태그로 둘러싸고 디자인합니다. React+TypeScript+TailwindCSS로 이번은... HTMLCSSReacttailwindcss 【React와 Next.js의 학습 방법】fwywd(퓨드) 채용 1차 시험을 css도 위험한 초보자가 학습한 흐름 fwywd(퓨드)의 채용 시험에 도전하고 싶지만, 써 있는 내용이 주문으로밖에 보이지 않는다. React · Next.js · tailwindcss · Vercel? 프로그래밍 초보자나 같은 생각을 하고 있는 사람의 도움이 되면 기쁩니다. 시험 내용을 파악하고 싶다 React 나 Next.js 등을 잘 모르겠습니다 React: HTML의 외형을 만들 수 있다. HTML에 변수를 전달할 수 있... Reactnext.jsVerceltailwindcssfwywd Tailwind에서 파란색 프레임을 지우는 방법 Tailwind를 사용하면 버튼을 누를 때 파란색 테두리가 나옵니다. 설정하지 않아도 마음대로 나오므로 지우는 방법을 찾았습니다. tailwind.css 아래의 코드를 주석 처리합니다. 수정 전 tailwind.css 수정 후 tailwind.css 이제 파란색 프레임이 사라졌습니다. 수수함에 신경이 쓰이므로, 사라져 좋았습니다!... React자바스크립트TypeScripttailwindcss Tailwind CSS에서 @tailwind를 작성할 때 VS 코드에서 오류가 발생하는 경우 ※2021/08/31 시점에 확인할 수 있던 동작이 됩니다. ・Node.js (16.8.0) 현재 Next.js, TypeScript 및 TailwindCSS로 프로젝트를 만들고 있습니다. 그 때 Tailwind CSS 셋업에서 공식이나 다른 기사를 참고하면서 하고 있으면, 타이틀과 같이 에서 import시에 에러가 표시되었습니다. styles/globals.css Unknown at rul... Reactnext.jsTypeScripttailwindcssVSCode tailwindCSS로 import되지 않습니다. 장식 설정이 반영되지 않는 문제를 해결합니다. Win10 Next.js VSCode 추가 2021년 10월 27일 정상적인 CSS 파일 경고가 사라지지 않을 때 VScode 확장 기능 를 넣을 수 있다. 추가 종료 추가 2021년 6월 10일 VSCode를 클린 설치(VScode 자체 외, VScode의 설정도 확장 기능도 모두 소거) styles/globals.css 물결선이 표시되고 그 위에 마우스 커서를 올려 놓으면, 새로 설치한 후 이 단계에서도 동일하게Unknown... next.jstailwindcssVSCodeWindows10 3분 안에 Nuxt.js(+TailwindCSS) + Storybook으로 Atomic Design하는 환경 만들기 이것은 Nuxt.js + Storybook의 환경을 만들고 싶지만 여러 가지 귀찮은 사람을 위해 만든 히나가타입니다. 우선 샘플용으로 Button 만 작성하고 있습니다. Git for Windows 또는 Terminal을 시작하고 작업 디렉토리에서 다음 명령을 순서대로 입력합니다. 마지막 명령의 실행이 끝나면 마음대로 브라우저가 기동할 것입니다만, localhost:3003 하지만 열 수 있... AtomicDesignVue.jsnuxt.jstailwindcssstorybook 【TailwindCSS】스크롤 바를 보이지 않게 한다 소개 평소 개발에서 TailwindCSS를 사용하고 있지만,이 스크롤 바를 지우고 싶습니다. CSS에서는 쉽게 구현할 수 있지만 TailwindCSS 표준으로 스크롤을 지울 수 없었습니다. (Tailwind라면 상당히 이런 일이 있다) 원래 코드 .tsx 구현 방법 TailwindCSS의 구멍은 styled-component를 사용하여 구현하는 것이 좋을 것 같습니다. 먼저 command로 ... tailwindcssReactnext.js Tailwind CSS의 purge를 개발 환경에도 적용 Next.js 프로젝트에 Tailwind CSS를 설치했습니다. 개발 환경에서 Tailwind CSS가 적용되었는지 확인했기 때문에 시험에 vercel에 배포하려고했습니다. 아래 그림과 같이 보이는 방법에 차이가있었습니다 개발 환경 프로덕션 환경 tailwind.config.js 에 기재되어 있던, purge 의 설정이 좋지 않은 모습.purge는 사용하지 않는 Tailwind CSS 스타일... tailwindcssnext.js Next.js+Tailwind에 Google 글꼴 추가 styles/globals.css tailwind.config.js about.jsx Tailwind CSS의 글꼴 설정을 사용자 정의합니다. 에 액세스하여 모든 글꼴의 을 가져옵니다. Next.js의 globals.css에 을 추가합니다. styles/globals.css tailwind에 글꼴 설정을 추가합니다. tailwind.config.js tailwind 형식으로 글꼴을 적용합니다... tailwindcssReactnext.js 마크다운을 tailwind css로 스타일링 사용 기술 Next.js Tailwind css react-markdwon 위 기술로 마크다운 스타일링 Tailwind css에서 기본 요소의 스타일링을 지우는 경우가 많습니다. 그대로라면 마크다운이 작동하지 않으므로 스타일링합니다. 마크다운에만 영향을 줍니다. (react-markdown에서 목차를 만든 가 있어, 그 다음부터 써 갑니다. Tailwind 관계없고, 보지 않아도 문제 없습니... tailwindcss마크다운Reactnext.js Next.js + TypeScript + Tailwind CSS 프로젝트의 환경 구축 절차 Next.js + TypeScript + Tailwind CSS 프로젝트의 환경 구축 절차를 정리했습니다. node와 npm은 설치가 끝난 것으로 가정합니다. 운영 환경 또한이 기사의 내용은 macOS (Apple Silicon)에서 실행됩니다. Windows를 이용하시는 분은 적당히 읽어 주시면 좋겠습니다. Next.js 프로젝트 만들기 (폴더가 생성되므로 작업 디렉토리 바로 아래에서 수행... 자바스크립트tailwindcssnext.jsMac Nuxt.js+Tailwind CSS에서 포트폴리오 사이트를 만들고 Netlify에서 공개 마지막 달부터 프리랜서 엔지니어로서 일하고 있습니다만, 일단 포트폴리오 사이트적인 것을 만들어 두는 편이 좋을까~라고 생각해 만들었습니다. 타이틀에도 있듯이, 과 를 사용해 개발해, 로 공개하고 있습니다. 이번은 간단하게, 사이트를 만드는데 있어서 이용한 기술에 대해 소개할까라고 생각합니다. Nuxt는 create-nuxt-app로 시작할 수 있으므로 편리합니다. 자신은 색 구성표에 을 사용... 포트폴리오Netlifynuxt.jstailwindcss tailwind 지원 Vue의 컴포넌트 라이브러리 여러분 tailwind 사용하고 있습니까? tailwind의 장점은, CSS를 쓰지 않고 클래스로 정의할 수 있으므로, CSS의 운용 코스트나 설계에 시간이 걸리지 않게 되는 것이군요. 한편, 그 반면에 Vuetify처럼 컴포넌트 준비해주지 않기 때문에, 상당히 1로부터 컴퍼넌트 작성하는 것이 많다고 생각합니다. tailwind 대응의 컴퍼넌트 없을까라고 생각해, 찾아냈지만 찾아내는 상당히 ... nuxtVue.jsnuxt.jstailwindcss webpack4에서 Tailwind CSS의 파일 크기를 줄이기까지 시도했습니다. Tailwind CSS 브라우저에서 로컬 이미지 파일을 읽고 연결하여 한 장의 이미지로 만드는 도구. webpack + Vue.js + Tailwind CSS. CSS 파일 크기 약 8KB. (보통 Minify했을 뿐이라면 600KB 정도가 됩니다.) 소스 코드의 파일 구성은 이런 느낌입니다. webpack은 이미 설치되어 CSS 로더와 Tailwind CSS를 설치합니다. CSS 파일을 외... purgecsswebpackpostcsstailwindcss Next.js에서 ReScript, tailwind 사용 샘플을 커맨드로 만들었을 때는 패키지의 버젼이 낡기 때문에 갱신한다. 에서 일괄적으로 ReasonML 형식(.re)에서 ReScript 형식(.res)으로 변환할 수 있다. 다음 두 개를 각각 다른 터미널 탭/창에서 실시 Tailwind는 CSS 프레임 워크 중 하나이며 Next.js에서 사용하는 방법이 때문에 일반적으로 따릅니다. style/main.css pages/_app.js tail... ReScripttailwindcssnext.js Next.js & Tailwind CSS 입문 Next.js의 입문편을 정리해 보았습니다. Next.js는 어쨌든 서버 측에서 실행되는 ReactJS입니다. 이것을 기억하면 서버 사이드도 프런트 엔드도 React의 느낌으로 쓸 수 있을 것 같습니다. 여기의 공식 문서를 참고로 했습니다. 먼저 yarn에서 React 프로젝트를 만듭니다. 프로젝트 이름은 기본 my-app이었습니다. 만든 프로젝트 내에서 yarn을 사용하여 다음을 설치합니다... ReactTypeScriptnext.js자바스크립트tailwindcss Next.js + TypeScript + Tailwind CSS 프로젝트 설정 절차 Next.js + TypeScript + Tailwind CSS 프로젝트 설정 절차를 요약했습니다. 또, 이번 기사는 macOS(Apple Silicon)에서 검증하고 있습니다. 먼저 create-next-app 명령을 사용하여 Next.js 템플릿에서 코드베이스를 만듭니다. 로그 보기: Creating a new Next.js app ... 명령이 완료되면 Next.js의 코드가 생성되었으... tailwindcssTypeScriptnext.js Tailwind CSS를 React 앱에 통합하는 방법 이 게시물에서는 create-react-app를 사용하여 반응 프로젝트를 생성합니다. 이렇게 하면 상대적으로 빠르게 코딩을 시작할 수 있도록 필요한 모든 것이 설정됩니다. 명령줄을 열고 다음 명령을 사용합니다. npmnpx create-react-app react-app-with-tailwindcd react-app-with-tailwind 실yarn create react-app react... tailwindcssjavascriptreactwebdev 가변 Google 글꼴로 NuxtJS 및 TailwindCSS를 설정하는 방법 단계별 가이드 VueJS 및 TailwindCSS를 기반으로 구축된 프레임워크인 NuxtJS를 사용하여 빠른 설정 프런트엔드 애플리케이션 보유 Google Fonts를 사용하여 초기 설정 및 부트스트래핑을 다룰 것입니다. 개발 시스템에 NodeJ가 설치되어 있지 않은 경우 을 참조하십시오. 위의 명령은 응용 프로그램을 시작하고 실행하는 데 필요한 파일을 가져옵니다. 나중에 사용할 필요가 없으... tailwindcssnuxtbeginnersgooglefonts TailwindCSS에서 삼각형을 만드는 방법 이 게시물에서는 테두리를 사용하여 TailwindCSS에서 삼각형을 그리는 네 가지 예제를 볼 것입니다. 삼각형은 기하학에서 가장 단순한 모양 중 하나입니다. 세 개의 직선과 두 개의 각으로 그릴 수 있습니다. 너비와 높이를 0으로 설정: w-0 및 h-0 전체 높이와 색상을 갖도록 위쪽 테두리를 다음과 같이 설정합니다. border-t-[75px] border-t-red-500 border... tailwindcsscsswebdevhtml Tailwind CSS 3 배지 예 이 섹션에서는 tailwind css 3으로 배지를 만들 것입니다. Tailwind CSS 3로 그림자, 배지 링 스타일로 배지를 만듭니다. 예 1 tailwind v3 단순 및 원형 배지. 테두리 스타일의 tailwind v3 배지. 예 2 링 스타일의 tailwind v3 배지. 그림자 스타일이 있는 tailwind v3 배지. 또한 읽기... tutorialtailwindcsswebdev Astro에 Vue 3를 설치하는 방법 이 섹션에서는 Astro에 vue 3을 설치합니다. 이 Astro 통합은 Vue 3 구성 요소에 대한 서버 측 렌더링 및 클라이언트 측 수화를 가능하게 합니다. css의 경우 astro가 Tailwind CSS를 쉽게 통합할 수 있으므로 Tailwind CSS를 사용합니다. 도구 사용 아스트로 Tailwind CSS(@astrojs/tailwind) 뷰 3(@astrojs/vue) 아스트로 ... astrotailwindcsswebdevvue Vite + Vue3 + Windi.CSS 환경 구축 Windi.CSS를 사용해보고 싶어서 Vite + Vue3 + Windi.CSS 로 환경 구축을 했으므로 순서를 정리했습니다. Windi.CSS에 대해서는 별도로 기사를 씁니다. 이번에는 npm을 사용하여 설치했습니다. 프로젝트 이름을 원하는대로 추가하십시오. (나는 windi-sample 했습니다) 라이브러리는 vue를 선택했습니다. ( vanilla 는 네이티브 JS 인 것 같습니다) 무... viteWindiVue.jsCSStailwindcss