<div id="readability-page-1" class="page"><div>
 <div id="SE-9e8b72f5-f920-44bb-b473-b35b42b94b07">
 <blockquote>
 도움이 되시면 '광고'를 한번씩 눌러시면 감사하겠습니다 :)
 </blockquote>
 </div>
 <div id="SE-45696864-460f-4b2c-aee5-07e1c42df353">
 ​개요​React.js 기반의 프로젝트에 tailwindcss 를 추가할때에는 프로젝트 생성을 전적으로 vite 나 cra 에게 맡기고 tailwindcss 세팅 (설치 및 config 파일 수정) 정도만 하게된다. 하지만, 순수 html 기반 프로젝트의 경우에는 vite 나 cra 를 사용하지 않다보니 디렉토리 생성부터 파일 생성부터 일일이 해줘야 해서 정리한다.​​​Tailwindcss 프로젝트 만들기​1. 프로젝트 생성​아래와 같이 명령어를 통해 프로젝트 생성, npm init, tailwindcss 설치를 진행한다.
 </div> <div id="SE-4c7861ff-cdae-4389-ab8f-22d1ac4c59a8">
 $ mkdir my-project &amp;&amp; cd my-project
$ npm init -y
$ npm i -D tailwindcss
 </div> <div id="SE-a83abccc-bd8a-4972-b41b-84e6e8fcf445">
 ​2. tailwind init​아래 명령어를 통해 이 프로젝트에서 tailwind 를 사용한다는것을 명시한다. 아래 명령어를 사용하면 tailwind.config.js 파일이 생성된다.
 </div> <div id="SE-fd050fab-a65d-48fb-824c-e1b489705814">
 ​​3. tailwind.conf.js 수정​tailwind.config.js 에 아래와 같이 적어준다. <a href="https://tailwindcss.com/docs/installation" target="_blank">document</a> 에서는 html 파일뿐 아니라 js 도 content 에 포함하니 필요에 따라 작성해주자.
 </div> <div id="SE-f1518871-6624-4e56-8284-b3126ed37fb2">
 /** @type {import('tailwindcss').Config} */
module.exports = {
 content: ['./src/**/*.html'],
 theme: {
 extend: {},
 },
 plugins: [],
};

 </div> <div id="SE-835d5238-9727-4246-aff8-219762225768">
 ​​4. src 디렉토리 생성 (with. html, css)​html 및 css 등의 파일을 모아놓는 src 디렉토리를 만들자. src 디렉토리에는 css 디렉토리와 html 디렉토리가 있고 각 디렉토리 하위에는 당연히 css 파일과 html 파일을 위치시킨다.(아래 캡쳐화면에 있는 css 파일들과 index.html 파일은 아래에서 진행하니 우선 무시하고 디렉토리만 만들자)
 </div> <div id="SE-2bc5aa9e-f877-4596-86c9-a17eb23c2bca">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-2bc5aa9e-f877-4596-86c9-a17eb23c2bca&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyMzA0MjFfMTU4/MDAxNjgyMDAzNzY1MjA1.qfdaMNtRPMpQ4NBxcUXLanAJYX-ldRZFPh8kjrtfNk4g.ldKUqqOnt8fWhJtJv1tpHcoteiBfwiiUEIzJ-TLupmIg.PNG.writer0713/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2023-04-21_%EC%98%A4%EC%A0%84_12.16.02.png&quot;, &quot;originalWidth&quot; : &quot;261&quot;, &quot;originalHeight&quot; : &quot;320&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
 <img src="https://mblogthumb-phinf.pstatic.net/MjAyMzA0MjFfMTU4/MDAxNjgyMDAzNzY1MjA1.qfdaMNtRPMpQ4NBxcUXLanAJYX-ldRZFPh8kjrtfNk4g.ldKUqqOnt8fWhJtJv1tpHcoteiBfwiiUEIzJ-TLupmIg.PNG.writer0713/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2023-04-21_%EC%98%A4%EC%A0%84_12.16.02.png?type=w800" data-width="261" data-height="320" alt="">
 </a>
 
 </div>
 <div id="SE-94a64055-6945-4588-a72e-bf4c27fa4d2f">
 ​​5. input.css 생성​src - css 디렉토리 하위에 input.css 를 만들자. 그리고, input.css 에 아래와 같이 tailwindcss 요소들을 추가해주자. 
 </div> <div id="SE-4b1856a8-5749-4fef-9f17-9d4797496f3e">
 @tailwind base;
@tailwind components;
@tailwind utilities;

 </div> <div id="SE-d9c3fe67-7404-4874-a39e-72fde243cfaf">
 ​​6. package.json 에 scripts 추가​이제 package.json 에 scripts 를 추가하자. 우리는 두 가지 script 를 추가할것이다. 단순 build 를 위한 build script 와 코딩시 자동으로 변경사항을 지속적으로 빌드해주는 watch script 를 생성할것이다.​딱 봐도 알겠지만 우리가 만든 input.css 를 빌드해서 src/css/style.css 라는 파일로 만들어주는 작업을 하게 된다.
 </div> <div id="SE-b588f8fd-e996-4b9a-8173-be90943befd1">
 {
 "name": "my-project",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "build": "npx tailwindcss -i ./src/css/input.css -o ./src/css/style.css",
 "watch": "npx tailwindcss -i ./src/css/input.css -o ./src/css/style.css --watch"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "devDependencies": {
 "tailwindcss": "^3.3.1"
 }
}

 </div> <div id="SE-e27467e2-4b9a-4f94-9119-9e03efb5659b">
 ​​​7. index.html​이제 tailwindcss 가 잘 세팅 됐는지 확인하기 위해 index.html 파일을 만들자.아래와 같이 index.html 을 만들고 style.css 파일을 사용하도록 하자.6번에서 만든 script를 실행하고 index.html 을 브라우저로 실행했을때 바탕이 어둡게 나오면 성공한것이다.
 </div> <div id="SE-9a95c515-3218-44b7-a569-bddc4b73d597">
 &lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8" /&gt;
 &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
 &lt;link rel="stylesheet" href="../css/style.css" /&gt;
 &lt;title&gt;Title&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div class="bg-slate-800 min-h-screen"&gt;Test&lt;/div&gt;
 &lt;/body&gt;
&lt;/html&gt;
 </div> <div id="SE-37b1e364-d570-4e34-8fff-434510801a62">
 ​​​8. .gitignore​npm 을 사용하여 패키지를 설치하면 node_modules 디렉토리가 생기는데, 만약 버전관리를 한다면 node_modules 는 버전관리에 포함하지 않기 위해 .gitignore 파일을 만들자.
 </div> <div id="SE-8b7c41d2-2e9a-4943-a025-106de9bce715">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-8b7c41d2-2e9a-4943-a025-106de9bce715&quot;, &quot;src&quot; : &quot;https://blogfiles.pstatic.net/MjAyMTAzMTlfMTU1/MDAxNjE2MTM4MjkxMjM3.dNZls450pxypmf-DDgpsXyvvHMt06U7ZQUNXnOQA43Ug.vtGD-dfDsIyabzZVoo-fdyd2AIYUoQuMT74Plq4T10Yg.JPEG.writer0713/kakao.jpeg?type=w1&quot;, &quot;originalWidth&quot; : &quot;256&quot;, &quot;originalHeight&quot; : &quot;103&quot;, &quot;linkUse&quot; : &quot;true&quot;, &quot;link&quot; : &quot;https://qr.kakaopay.com/2810060110000443710583945dc00000&quot;}">
 <img src="https://blogfiles.pstatic.net/MjAyMTAzMTlfMTU1/MDAxNjE2MTM4MjkxMjM3.dNZls450pxypmf-DDgpsXyvvHMt06U7ZQUNXnOQA43Ug.vtGD-dfDsIyabzZVoo-fdyd2AIYUoQuMT74Plq4T10Yg.JPEG.writer0713/kakao.jpeg?type=w1" alt="">
 </a>
 
 카카오페이로 후원
 </div>
 <div id="SE-d6bd9823-fdf0-4ca2-843d-6f14a118bf86">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-d6bd9823-fdf0-4ca2-843d-6f14a118bf86&quot;, &quot;src&quot; : &quot;https://blogfiles.pstatic.net/MjAyMTAzMTlfMTIy/MDAxNjE2MTM4Mzk5Mjkz.7C8k50nPce6NqNspKw4-LN2u34aGtUxhR0Wv_mZH-xQg.U1KVzLLFEU4OaZ2KhamW_jV6_a4jVmvV0V3yY0uTl_Qg.JPEG.writer0713/kakao_qr.jpeg?type=w1&quot;, &quot;originalWidth&quot; : &quot;330&quot;, &quot;originalHeight&quot; : &quot;330&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
 <img src="https://blogfiles.pstatic.net/MjAyMTAzMTlfMTIy/MDAxNjE2MTM4Mzk5Mjkz.7C8k50nPce6NqNspKw4-LN2u34aGtUxhR0Wv_mZH-xQg.U1KVzLLFEU4OaZ2KhamW_jV6_a4jVmvV0V3yY0uTl_Qg.JPEG.writer0713/kakao_qr.jpeg?type=w1" alt="">
 </a>
 
 카카오페이 QR코드로 후원
 </div>
 </div></div>

나만의공간。

KIM JUNGHWAN

도움이 되시면 '광고'를 한번씩 눌러시면 감사하겠습니다 :) 개요 React.js 기반의 프로젝트에 tailwindcss 를 추가할때에는 프로젝트 생성을 전적으로 vite 나 cra 에게 맡기고 tailwindcss 세팅 (설치 및 config 파일 수정) 정도만 하게된다. 하지만, 순수 html 기반 프로젝트의 경우에는 vite 나 cra 를 사용하지 않다보니 디렉토리 생성부터 파일 생성부터 일일이 해줘야 해서 정리한다. Tailwindcss 프로젝트 만들기 1. 프로젝트 생성 아래와 같이 명령어를 통해 프로젝트 생성, npm init, tailwindcss 설치를 진행한다. 2. tailwind init 아래 명령어를 통해 이 프로젝트에서 tailwind 를 사용한다는것을 명시한다. 아래 명령어.......

[CSS] Tailwindcss 프로젝트 만들기

댓글