tailwindcss in asp.net core

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
์ข‹์•„์š” 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

tailwindcss-question-mark of tailwindcss plugin

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

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

์ข‹์•„์š” 2