<div id="readability-page-1" class="page"><div>
                <div id="SE-60bab83c-eb73-4b23-a7c4-00932f0a24a5">
                                    <p id="SE-86d9558a-1b87-49c3-ba63-64dbe0a76770"><span id="SE-4d995372-e547-45a9-a811-109dc82836de">​</span></p><p id="SE-4dd2b1ec-b181-458c-8bb7-aab386f7ac90"><span id="SE-28b4eaff-09e6-4025-b5a0-7a3beafbde18"><b>tailwindcss 설치</b></span></p><p id="SE-fc056c04-c812-4d7b-b5e7-ce6b51587c69"><span id="SE-6998b981-02ae-46e1-8512-93f64f0a5b5f">​</span></p><p id="SE-d519a6b2-c3bc-446c-8921-1b3ab32e51cf"><span id="SE-ae690e49-bc8b-456c-844f-aa43099897d5">tailwindcss 설치 자체는</span><span id="SE-9b7debaf-927d-4a42-a281-41616dba434e"><b> </b></span><span id="SE-eb63890a-b3f2-4157-9176-444c6da5d4b8"><b>Tailwindcss installation</b></span><span id="SE-9edb4f33-d233-45c9-9246-24b1f26534f7"> 공식 문서 참고</span></p><p id="SE-c7ae9c9c-f804-4725-bfb5-1d0133e80e83"><span id="SE-b4bfb073-1b62-41c4-a987-3f887417091d">​</span></p>
                            </div>                
                <div id="SE-d472d19d-ae11-4449-9bfe-41137752e274">
                                    <p id="SE-020480ca-a973-46f3-97f0-700447e3814b"><span id="SE-9a4f767b-b415-4f85-95cb-69093cabf612">​</span></p><p id="SE-607e2cbd-05af-4865-bb5b-91af3ca072e9"><span id="SE-964d21d5-14d0-4a03-be53-6dca940263b1"><b>prettier 설치 및 설정</b></span></p><p id="SE-c4b8d028-0b90-487b-8d99-96bc56e7d567"><span id="SE-a7532a2b-dd0d-4abc-b9bc-5f3c81dd54f5">​</span></p><p id="SE-e07fd4fc-4ae0-4d76-9767-bbf25c08cddc"><span id="SE-207452e5-bc15-4746-be40-e1401d707e37">1) 두가지 의존성 설치</span></p><ul><li><ul><li><p id="SE-e39d6289-c7ed-4ee8-ab2a-501319b38913"><span id="SE-14af819c-5eb0-4526-9f8e-e5293478610a">prettier</span></p></li><li><p id="SE-7a9b2186-9b48-4839-a2bc-7e544607cf38"><span id="SE-87cc587f-52b1-4e71-8ab2-79367845cb47">prettier-plugin-tailwindcss</span></p></li></ul></li></ul>
                            </div>                <div id="SE-56e4ce5f-c37b-42d9-a23a-81072ec4f325">
                                    <p>npm i -D prettier prettier-plugin-tailwindcss</p>
                                </div>                                <div id="SE-b58b1aa6-5fe0-426f-a73d-f2e728ce0aa0">
                                    <p>{
  "plugins": ["prettier-plugin-tailwindcss"]
}</p>
                                </div>                <div id="SE-bfc83d5e-94f5-45ee-8284-fc2e53468cfa">
                                    <p id="SE-5ea05d34-8128-4d6f-a6ca-85ba769d6345"><span id="SE-8d6845a8-d1ea-4e4e-829f-36a978176f99">3) tailwindcss classname 에 prettier 적용되나 확인</span></p><ul><li><ul><li><p id="SE-ae631128-4c86-4e85-8f55-c45d404a7322"><span id="SE-b3f96ce1-5f00-4d88-9fc0-0f0164b7670d">layout 관련 classname 이 앞쪽에 그 외 classname 이 뒷쪽에 위치하게 됨</span></p></li></ul></li></ul>
                            </div>                <div id="SE-c6e5dbdb-a575-4814-a98f-17aa17175195">
                                    <p>function App() {
  return (
    &lt;&gt;
      &lt;div className="bg-black text-2xl font-bold text-white underline"&gt;
        Hello World
      &lt;/div&gt;
    &lt;/&gt;
  );
}

export default App;
</p>
                                </div>                                                <div id="SE-8b7c41d2-2e9a-4943-a025-106de9bce715">
                                <p><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;, &quot;fileSize&quot;: &quot;10139&quot; }">
                                        <img src="https://blogfiles.pstatic.net/MjAyMTAzMTlfMTU1/MDAxNjE2MTM4MjkxMjM3.dNZls450pxypmf-DDgpsXyvvHMt06U7ZQUNXnOQA43Ug.vtGD-dfDsIyabzZVoo-fdyd2AIYUoQuMT74Plq4T10Yg.JPEG.writer0713/kakao.jpeg?type=w1" alt="">
                                    </a>
                                </p>
                            <p id="SE-d5bf551a-c6ba-4e06-b5c5-e4aa9d1ee9cb"><span id="SE-5f58a99e-73e7-4042-833d-33efea0b809e">카카오페이로 후원</span></p>
                        </div>
                <div id="SE-d6bd9823-fdf0-4ca2-843d-6f14a118bf86">
                                <p><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;, &quot;fileSize&quot;: &quot;31457&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>
                                </p>
                            <p id="SE-8276644c-66c5-42a6-bda7-2637d5e90eba"><span id="SE-9a8d43d0-5116-4646-9431-7463b6be9a7d">카카오페이 QR코드로 후원</span></p>
                        </div>
                                                <div id="SE-e87e994f-ced4-42ed-9947-8a4d93fb4360">
                            <p id="SE-3cd6d3b0-09f8-450a-8840-61f8875c8298"><span id="SE-53266821-96c2-43ee-92a9-527b3ddea2a4"><span>#tailwindcss</span> <span>#tailwindcssprettier</span> <span>#prettier</span></span></p>
                        </div>    </div></div>

나만의공간。

KIM JUNGHWAN

tailwindcss 설치 tailwindcss 설치 자체는 Tailwindcss installation 공식 문서 참고 prettier 설치 및 설정 1) 두가지 의존성 설치 prettier prettier-plugin-tailwindcss 2) .prettierrc 생성 및 설정추가 3) tailwindcss classname 에 prettier 적용되나 확인 layout 관련 classname 이 앞쪽에 그 외 classname 이 뒷쪽에 위치하게 됨 #tailwindcss #tailwindcssprettier #prettier

[React.js] tailwindcss 설치 및 prettier 설정

댓글