tailwindcss in asp.net core

๐Ÿงต Slog
1

tailwindcss๋„ ๋ถ€ํŠธ์ŠคํŠธ๋žฉ๊ณผ ๊ฐ™์€๋ฅ˜์˜ css framework์ž…๋‹ˆ๋‹ค.

tailwindcss๋Š” mobile-first์ž…๋‹ˆ๋‹ค. ๊ธฐ๋ณธ ๊ธฐ์ค€ํ™”๋ฉด์ด mobile์ž…๋‹ˆ๋‹ค.
htmlํƒœ๊ทธ๋ฅผ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ํ‘œ์‹œํ• ๋•Œ์— pl-10์ด ๊ธฐ๋ณธ์ด๋ฉฐ lg:pl-20์€ ํ™”๋ฉด์˜ ์Šคํฌ๋ฆฐ์‚ฌ์ด์ฆˆ๊ฐ€ 1024px์ด์ƒ์ผ๋•Œ ์ ์šฉ๋ฉ๋‹ˆ๋‹ค.

<div class="pl-10 lg:pl-20">

module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      // => @media (min-width: 640px) { ... }

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

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

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

      '2xl': '1536px',
      // => @media (min-width: 1536px) { ... }
    }
  }
}

install & config

[Terminal >> ๋ชจ๋“ˆ ์ธ์Šคํ†จ ๋ฐ ํ™˜๊ฒฝ์„ค์ •ํŒŒ์ผ ์ดˆ๊ธฐํ™”]
npm install -D tailwindcss
npx tailwindcss init

[์ƒ์„ฑ๋œ tailwind.config.js์˜ content๋ฅผ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.]
[tailwindcss build์‹œ cshtml ์ฝ”๋“œ์— ํฌํ•จ๋œ class๊ฐ€ ์Šคํƒ€์ผ์‹œํŠธ๋กœ output๋˜๊ฒŒ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.]

module.exports = {
  content: [""./Pages/**/*.{cshtml,js}""],
  theme: {
    extend: {},
  },
  plugins: [],
}

[Pages/Src/Site.css ํŒŒ์ผ์„ ์ƒ์„ฑํ•˜์—ฌ ๋‹ค์Œ ๋‚ด์šฉ์„ ๊ธฐ์ž…ํ•ฉ๋‹ˆ๋‹ค.]
@tailwind base;
@tailwind components;
@tailwind utilities;

[Terminal >> tailwind.config.js๋ฅผ ์„ค์ •์œผ๋กœ stylesheet๊ฐ€ ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค.]
[tailwind.config.js์— ์„ค์ •๋œ content์˜ ํŒŒ์ผ์„ ๊ฒ€์ƒ‰ํ•˜์—ฌ ์‚ฌ์šฉ๋œ class๋“ค๋งŒ export๋ฉ๋‹ˆ๋‹ค.]
npx tailwindcss -i ./Pages/Src/site.css -o ./wwwroot/css/site.css --watch
3๊ฐœ์˜ ์ข‹์•„์š”
2

๊ธฐ๋ณธ ํฐํŠธ ๋ณ€๊ฒฝ์€ tailwind.config.js์—์„œ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
    content: ["./Pages/**/*.{cshtml,js}"],
    theme: {
        fontFamily: {
            'sans': ['OpenSans', 'Malgun Gothic', 'Dotum', 'sans-serif', defaultTheme.fontFamily.sans],
        },
        extend: {
        },
    },
    plugins: [],
}

์ € ๊ฐ™์€ ๊ฒฝ์šฐ Desktop-First๊ฐ€ ์ต์ˆ™ํ•ด์„œ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋ณ€๊ฒฝํ•˜์—ฌ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
์•„๋ž˜์™€ ๊ฐ™์ด ์„ค์ •ํ•˜๋ฉด screen์ด 576px ๋ณด๋‹ค ์ž‘์œผ๋ฉด sm ์œ ํ‹ธ๋ฆฌํ‹ฐ๋ฅผ ์ด์šฉํ•œ ํด๋ž˜์Šค๋“ค์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

module.exports = {
    content: ["./Pages/**/*.{cshtml,js}"],
    theme: {
        screens: {
            'sm': {'max':'576px'},
            // => @media (max-width: 576px) { ... }
        },
        extend: {
        },
    },
    plugins: [],
}
2๊ฐœ์˜ ์ข‹์•„์š”
3

tailwindcss-question-mark of tailwindcss plugin

ํ”„๋ŸฐํŠธ ์ž‘์—…์ค‘ ๊ธด์š”ํ•˜๊ฒŒ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ํ•ด๋‹น github์— ์„ค์น˜๋ฐฉ๋ฒ•์ด ์ž˜ ๋‚˜์™€ ์žˆ์Šต๋‹ˆ๋‹ค.

npm install tailwindcss-question-mark

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('tailwindcss-question-mark'),
    // ...
  ],
}

3๊ฐœ์˜ ์ข‹์•„์š”
4

asp.net core razor pages, blazor ๋“ฑ์— tailwindcss๋ฅผ ๊ฐœ๋ฐœํ™˜๊ฒฝ์—์„œ ์‚ฌ์šฉํ• ๋ ค๋ฉด ๋ถˆํŽธํ•œ ์ ์ด ๋งŽ์Šต๋‹ˆ๋‹ค.

ํ•ด์„œ, ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฐฐํฌ๋œ ํ™˜๊ฒฝ์—์„œ๋Š” ๊ถŒ์žฅํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์œ„ ๋ฐฉ๋ฒ•์„ ์ด์šฉํ•˜๋ฉด ํ•ด๋‹น ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ inline style์„ ์ƒ์„ฑํ•ด ์ฃผ๋ฏ€๋กœ tailwindcss๋ฅผ ๋งค๋ฒˆ ๋นŒ๋“œํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

ํ—Œ๋ฐ, ์‚ฌ์šฉํ•ด๋ณด๋ฉด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ๋ฌด๊ฑฐ์›Œ์„œ ๊ทธ๋Ÿฐ์ง€ ์‚ฌ์ดํŠธ๊ฐ€ ๋ฒ„๋ฒ…๊ฑฐ๋ฆฝ๋‹ˆ๋‹ค.

์œ„ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ํ›จ์”ฌ ๊ฐ€๋ฒผ์šด ๊ฐœ์„ ๋œ ํ™˜๊ฒฝ์—์„œ ๊ฐœ๋ฐœ์„ ํ…Œ์ŠคํŠธ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

<head>
  <script src="https://cdn.twind.style" crossorigin></script>
  <script type="text/javascript">
      const options = 
      { 
      "preflight": true, 
          "theme": { 
              "container": { 
                  "center": true, 
                  "padding": "0px", 
                  "screens": { 
                      "sm": "600px", 
                      "md": "728px", 
                      "lg": "960px", 
                      "xl": "1280px", 
                      "2xl": "1536px" 
                  } 
              } 
          } 
      }
        twind.install({
            ...options,
            hash: (className) => className,
            preflight: {
                // Import external stylesheet
                '@@import': `url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap')`,
            },
            rules: [
                [
                    // tailwindcss apply
                    'test-el',
                    '@@(bg-red-500)',
                ],
                [
                    'test-el1',
                    '@@(font-bold text-white)'
                ]
            ]
        })
  </script>
</head>

<QuickGrid Items="@people">
    <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" Class="test-el test-el1" />
    <PropertyColumn Property="@(p => p.Name)" Sortable="true" />
    <PropertyColumn Property="@(p => p.PromotionDate)" Format="yyyy-MM-dd" Sortable="true" />
</QuickGrid>
2๊ฐœ์˜ ์ข‹์•„์š”