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
기본 폰트 변경은 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
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
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
요즘 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