<div id="readability-page-1" class="page"><div>
                                <div id="SE-9e8b72f5-f920-44bb-b473-b35b42b94b07">
                            <blockquote>
                                <p id="SE-d2063cd8-2848-4ade-9b38-8b335a9e31fd"><span id="SE-5b68c2ff-cb90-40ff-8106-bdb8111378d5">도움이 되시면 '광고'를 한번씩 눌러시면 감사하겠습니다 :)</span></p>
                            </blockquote>
                        </div>
                <div id="SE-45696864-460f-4b2c-aee5-07e1c42df353">
                                    <p id="SE-4dd2b1ec-b181-458c-8bb7-aab386f7ac90"><span id="SE-28b4eaff-09e6-4025-b5a0-7a3beafbde18">​</span></p><p id="SE-173a89e7-ba3f-4eb3-a395-5bc24dd0f1f9"><span id="SE-176cef68-3635-432d-a82d-5a0a8cb9d1e9"><b>개요</b></span></p><p id="SE-fcd2e9f6-a7db-4e2b-a9a5-bbc6b6a6763f"><span id="SE-75cca6ac-faac-41a3-9cc9-6d19a38ea9a8">​</span></p><p id="SE-c90d5cad-1a6d-4a09-9d50-c3310ed0c270"><span id="SE-26f1558e-8039-4a34-8067-72a2746018a9">Tailwindcss 자체에서 제공해주는 기능만 사용해도 깔끔한 퍼블리싱이 가능하지만, 만약 디자이너와 함께 일한다거나 혹은 좀 더 세밀하게 (ex. color, responsive screen size, font family, etc) 조작을 해야한다면 tailwind.config.js 에 해당 사항들을 추가하여 사용하면 된다.</span></p><p id="SE-13a508bb-36e9-4a91-8f87-34b494e09288"><span id="SE-7df5f475-5b6a-4675-993d-2a4d264b0e93">​</span></p><p id="SE-38c6f645-8188-4059-8765-b3bb183ff580"><span id="SE-c92e356c-1e8e-474a-bf95-3898d8ab05d5">​</span></p><p id="SE-1bb2d7e9-2d74-4c9b-9b50-ae2ad630991d"><span id="SE-58dd0dfb-c77d-4345-b96b-7140109ce267">​</span></p><p id="SE-6da5f605-415b-4607-90e1-dbf49b1b1b51"><span id="SE-c15767eb-5ae3-4723-a0bf-e7c56f1b31ba"><b>screen 사이즈 (break point)</b></span></p><p id="SE-548e762e-065b-48b9-85e1-e98b5a826c21"><span id="SE-d9c7effd-4c8b-4da2-add1-680167676833">​</span></p><p id="SE-f675cbc0-fadc-423d-9f22-a07378e11db4"><span id="SE-c17f37f8-0162-4561-8086-52962948d668">tailwindcss 에서는 기본적으로 responsive screen size (break point) 를 제공한다. 하지만, 만약 본인이 원하는 break point 를 사용하고 싶다면 아래와 같이 screens object 를 추가하면 된다.</span></p>
                            </div>                <div id="SE-1544ff35-186b-4633-9c57-8f934ea32d9b">
                                    <p>module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      // =&gt; @media (min-width: 640px) { ... }

      'md': '768px',
      // =&gt; @media (min-width: 768px) { ... }

      'lg': '1024px',
      // =&gt; @media (min-width: 1024px) { ... }

      'xl': '1280px',
      // =&gt; @media (min-width: 1280px) { ... }

      '2xl': '1536px',
      // =&gt; @media (min-width: 1536px) { ... }
    }
  }
}</p>
                                </div>                                                <div id="SE-55eca79f-cdfb-4958-97f5-4e0bf40f1a42">
                                    <p id="SE-5b7ce0fe-55dc-4743-b43c-eed1fd13ada8"><span id="SE-277d9e9c-e628-4bd1-91a5-569183f80160">​</span></p><p id="SE-dd3f3e6e-0586-4b69-a905-9b22e5f549da"><span id="SE-924265f9-8388-4620-b5e9-b3d00ddc35ca">​</span></p><p id="SE-dc37251f-96f3-4e3d-be81-dfc8a5245402"><span id="SE-d29730a9-2044-49c6-8f38-8bb40dd142b3">​</span></p><p id="SE-141541fc-deee-4f02-b4c5-41dc3e3fa750"><span id="SE-600f7f61-dce9-4bf3-a837-c28636ac42df"><b>colors</b></span></p><p id="SE-d0274c59-a8d3-4ec8-9334-37b7a0bb65a5"><span id="SE-31c16cf2-d69c-496b-8d7b-bf20354565ef">​</span></p><p id="SE-5def68b9-26e1-45ac-ad57-0172f0c1bb2c"><span id="SE-13a1d6f2-be59-4dfd-92bc-817a17872df1">color 역시 tailwindcss 에서 제공해주는것들을 사용해도 되지만, 만약 특정 색 조합들을 미리 등록해놓고 사용하고 싶다면 extend.colors 에 추가하면 된다.</span></p>
                            </div>                <div id="SE-bf01bfca-1a29-43cd-8e0e-0c934741d13e">
                                    <p>module.exports = {
  theme: {
    extend: {
      colors: {
        brown: {
          50: '#fdf8f6',
          100: '#f2e8e5',
          200: '#eaddd7',
          300: '#e0cec7',
          400: '#d2bab0',
          500: '#bfa094',
          600: '#a18072',
          700: '#977669',
          800: '#846358',
          900: '#43302b',
        },
      }
    },
  },
}</p>
                                </div>                <div id="SE-5e1251ed-9c19-4f3f-a7fb-17cc56f37da3">
                            <p id="SE-ad6ab8e4-d231-41c5-bb72-6ba10f0a6ea7"><span id="SE-062fa513-b604-4da5-b75c-84124d6161ea">만약, 추가가 아니라 default color name 은 그대로 사용하고 색을 바꾸고 싶다면 theme.colors 에서 바꿀수 있다.</span></p>
                        </div>                <div id="SE-d4c395d7-8ac4-4f3b-b6a6-4fed72141dbb">
                                    <p>const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.slate,
      green: colors.emerald,
      purple: colors.violet,
      yellow: colors.amber,
      pink: colors.fuchsia,
    },
  },
}</p>
                                </div>                                                <div id="SE-ccd2b431-fcbf-4461-ba5e-321e792db636">
                                    <p id="SE-209fd75b-7d86-4e26-8b44-ea31f6b0e6d9"><span id="SE-140eafba-64c5-4b01-99e6-6a3ef29a979a">​</span></p><p id="SE-0916eea5-5543-40cd-8084-bd02c9d55b81"><span id="SE-515b21f2-f729-433c-b440-981ce398525d">​</span></p><p id="SE-920a9f46-0264-426a-9dce-681e2d4fa3eb"><span id="SE-bb8ee4da-f4d8-43f1-a5af-0ccba868a6e7">​</span></p><p id="SE-c2c8043c-0164-4e39-b39e-e4e20c358853"><span id="SE-0478ca37-9151-4823-893a-01479a92889b">​</span></p><p id="SE-9db6f13f-d493-4250-8921-ca960e28103c"><span id="SE-4afb1e5d-a4a4-4d97-b3eb-82d9df8ad688"><b>Font Family</b></span></p><p id="SE-8f70e131-0a47-4402-9f35-9fd6c131d67f"><span id="SE-fc22bcf6-b063-4ccb-b26e-9e22fb728caa">​</span></p><p id="SE-32ce55ce-4e23-4367-ba91-752a47bdc6a8"><span id="SE-6cb1e2db-8d94-465f-bc37-cdb3190938bb">font 역시 추가가 가능하다. 아래와 같이 extend.fontFamily 에 원하는 fontFamily 를 추가하고 index.html 에 font 관련 속성을 추가해주면 된다.</span></p>
                            </div>                <div id="SE-3810b640-d9b5-49b8-b25d-109404e68ddc">
                                    <p>/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.html'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Bai Jamjuree', 'sans-serif'],
      },
    },
  },
  plugins: [],
};</p>
                                </div>                <div id="SE-d262aa66-1f2c-444c-9fa2-2998a4ac6edd">
                                    <p>&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="preconnect" href="https://fonts.googleapis.com" /&gt;
    &lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /&gt;
    &lt;link
      href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;600&amp;display=swap"
      rel="stylesheet"
    /&gt;
    &lt;link rel="stylesheet" href="../css/style.css" /&gt;
    &lt;title&gt;Title&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    
  &lt;/body&gt;
&lt;/html&gt;
</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;}">
                                        <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;}">
                                        <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></div>

나만의공간。

KIM JUNGHWAN

도움이 되시면 '광고'를 한번씩 눌러시면 감사하겠습니다 :) 개요 Tailwindcss 자체에서 제공해주는 기능만 사용해도 깔끔한 퍼블리싱이 가능하지만, 만약 디자이너와 함께 일한다거나 혹은 좀 더 세밀하게 (ex. color, responsive screen size, font family, etc) 조작을 해야한다면 tailwind.config.js 에 해당 사항들을 추가하여 사용하면 된다. screen 사이즈 (break point) tailwindcss 에서는 기본적으로 responsive screen size (break point) 를 제공한다. 하지만, 만약 본인이 원하는 break point 를 사용하고 싶다면 아래와 같이 screens object 를 추가하면 된다. colors color 역시 tailwindcss 에서 제공해주는것들을 사.......

[CSS] Tailwindcss 커스터마이징 (screen, colors, fontFamily)

댓글