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 Likes
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 Likes
3

tailwindcss-question-mark of tailwindcss plugin

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

npm install tailwindcss-question-mark

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

4 Likes
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 Likes
5

요즘 hydro로 작업중인데 asp.net core에서 tailwindcss를 사용할때 유용한 방법인것 같아 추가적으로 내용을 남깁니다.

https://toolkit.usehydro.dev/installation/manual/

기존에는 터미널에서 npm으로 설치된 tailwindcss를 watch옵션을 줘서 실행해서 처리했었는데 Tailwind Cli를 HostedService로 이용한 방법이 있네요.

using System.Diagnostics;

namespace YourProject;

public class TailwindHostedService : IHostedService
{
    private Process _process;

    public Task StartAsync(CancellationToken cancellationToken)
    {
        _process = Process.Start(new ProcessStartInfo
        {
            FileName = "tailwindcss",
            Arguments = "-i ./wwwroot/css/input.css -o ./wwwroot/css/output.css --watch",
            RedirectStandardOutput = true,
            RedirectStandardError = true,
            UseShellExecute = false,
            CreateNoWindow = true
        })!;

        _process.EnableRaisingEvents = true;
        _process.OutputDataReceived += (_, e) => LogInfo(e);
        _process.ErrorDataReceived += (_, e) => LogInfo(e);

        _process.BeginOutputReadLine();
        _process.BeginErrorReadLine();

        return Task.CompletedTask;
    }

    private static void LogInfo(DataReceivedEventArgs e)
    {
        if (!string.IsNullOrWhiteSpace(e.Data))
        {
            Console.WriteLine($"Tailwind: {e.Data}");
        }
    }

    public Task StopAsync(CancellationToken cancellationToken)
    {
        Console.WriteLine("Tailwind: STOP");
        _process?.Kill(entireProcessTree: true);
        return Task.CompletedTask;
    }
}
4 Likes