[Day30]C# 不鸡础观念- Install Tailwind Css with ASP.NET MVC5

今天是铁人赛最後一天，
我们来点不一样的，
就是Tailwind Css啦

一.先前准备

• 建立新资料夹
• 将资料夹命名为jit_init

• 开启资料夹位置

• 於路径输入CMD，并按下Enter

二.导入tailwindcss

• 於主控台输入 npx tailwindcss-cli init --jit
• 成功之後会在jit_init资料夹看到tailwind.config.js档案

• 将附档package.json复制到jit_init资料夹
• 输入npm install tailwindcss autoprefixer postcss postcss-cli
• 成功之後会在jit_init资料夹看到node_modules目录以及package-lock.json档案
• package.json

• 将附档public.zip解压缩并复制到jit_init资料夹
  public.zip

• 开启package.json修改css输出路径
  

• 开启tailwind.config.js修改purge(tailwindcss作用范围)

• MVC为例('../Views/**/*.cshtml')

三.启动tailwindcss-cli

• 於主控台输入npm install
  

• 於主控台输入npm run jit
  

四.MVC专案设定

• 将app.css引用到_Layout.cshtml
• <link href="~/Content/app.css" rel="stylesheet">

• 於方案总管点选显示所有档案
  

• 将app.css加入专案
  

注意:每次重新开启专案时，皆需执行npm run jit 指令

• 这样编辑CSS时，才有办法做更新
  

最後最後，我们谢谢兔兔当时花很多时间在帮我校这份稿

如果大家对Tailwind Css不熟，但很想入门，欢迎去看他的文章

兔兔传送门