아시다시피, 블레이저는 부트 스트랩을 기본 CSS 프레임워크로 사용하고 있습니다.
비주얼 스튜디오에서 아래와 같이 태그를 작성하면,
class=“”
attributes 값이 제시되는데, 이 값이 부트 스트랩일 경우, 값 앞에 뚱뚱한 B 모양의 부트 스트랩 마크를 보여줍니다. 그런데, 최근 몇 번의 비주얼 스튜디오 업데이트 이후에, 부트스트랩의 로고가 사라지고, “T” 마크가 붙습니다. (아래 그림의 빨간 박스)
Bing에게 물어 보니, T는 Tailwind 의 마크라고 합니다.
이 프로젝트에 Tailwindcss를 적용해본 적이 있었으나, 이미 기본값인 부트스트랩으로 원복해놓은 상태입니다.
_Host.cshtml 의 해드값
원복 이후에 문제없이 부트스트랩 로고가 잘 보여지다가, 최근의 업데이트 진행 후, 위와 같이 T 로고로 변경되었습니다.
헤드값에 변경이 전혀 없는데도 불구하고, T가 보여지는 다른 이유가 있을까요?
Bootstrap는 갈수록 사용안하는 추세고, 근래의 대세는 TailwindCss입니다.
대세를 따라 기본 컴포넌트가 바뀐게 아닐까 싶네요.
우선 반가운 닉이네요. ^^
asp.net 은 css 프레임워크 설정에 있어서 전통적인 방식 - <head> 태그에 스타일시트 값으로 CDN이나 css 파일을 지정하는 방식을 사용하는 것으로 알고 있습니다.
따라서, TailwindCss 가 적용되었다면, <head>에 tailwindcss의 CDN 값이나 css 파일 지정이 변경되어야 합니다. 그러나, 질문에 보여드렸듯, 아무런 변화가 없습니다.
더군다나, TailwindCss 는 jit 방식이라 디버깅 시에 tailwind 빌더가 실행 상태가 되어 있어야 하는데, 프로젝트의 빌드 태스크도 정의되어 있지 않습니다.
(가능성이 낮은 얘기이지만) 만약 asp.net 이 tailwind 를 내재화 했다면, 닷넷 뉴스를 통해 홍보를 했을텐데, 그런 기사를 찾아 볼 수도 없구요.
흥미로운 주제가 되실 지는 모르겠는데,
이런 친구도 있네요.
흑흑 이제 bootstrap (+devexpress) 쓰는 것에 익숙해질랑말랑 한데. 멀고도 험하네요.
css 냐, css 프레임워크이냐의 선택 문제는 짜장이냐 짬뽕이냐의 문제가 아닐런지요 ㅠㅠ
이 거 하면 저게 더 좋아 보이고, 저걸 하면 이게 더 좋아 보이고… ㅠㅠ
저도 tailwindcss를 사용하는지라 혹시 되나싶어 vs를 최신버전으로 업데이트해도 저같은 경우에는 해당 사항이 나타나질 않습니다.
혹시 확장프로그램때문이지 않을까 하다가 오히려 좋은 tailwindcss 확장프로그램을 찾았습니다.
tailwindcss 인텔리센스도 되고 tailwind 설정도 쉽고 빌드도 되고 그렇네요.
blazor서버앱으로 잠시 테스트 해봤는데 정상 작동합니다.
확장프로그램 설치후
@tailwind base; /* Preflight will be injected here */
@tailwind components;
@tailwind utilities;
wwwroot 아래에 css파일 생성후 output css로 설정
config는 다음과 같이 설정했습니다.
module.exports = {
content: ["./Pages/*.{razor,cshtml}"],
theme: {
extend: {},
},
plugins: []
}
참고로, twind를 이용하면 build없이 기본적인 tailwindcss는 사용 가능합니다. tailwindcss cdn를 통해서도 가능한데 tailwindcss cdn보다 가볍습니다.
답변 감사합니다.
그렇군요. 그러면 또 비주얼 스튜디오의 에러 같아 보입니다.
제가 뭘 바꾸지는 않았으니, 업데이트 몇번 반복되면 자연스럽게 해결되겠네요. ^^
css 프레임워크 쓰다가 불편하면, css 다시 보고, 그거하다가 지치면 다시 css 프레임워크 찾고 하는 일이 반복되네요.
지금은 그냥 어찌되었건 부트스트랩 + css 보강 등으로 버텨보려고 합니다.
ㅎㅎㅎㅎㅎㅎㅎ 다들 좋은 걸 많이 알려주셔서 너무 고맙습니다!
저도 괜히 손 많이 가는 복잡한 데이터 컨트롤 말곤 bs+css 마개조가 제일 속 편하더라구요 […]