tailwindcss in asp.net core

_jeonghwan · 9월 21, 2022, 7:05오전

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

_jeonghwan · 9월 22, 2022, 2:41오전

기본 폰트 변경은 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: [],
}

_jeonghwan · 9월 23, 2022, 4:40오전

tailwindcss-question-mark of tailwindcss plugin

프런트 작업중 긴요하게 사용하고 있습니다. 해당 github에 설치방법이 잘 나와 있습니다.

npm install tailwindcss-question-mark

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