【Angular】如何在Angular中使用Tailwind

3 年 ago

逸, 科

2 minutes

让@ngneat/tailwind处理复杂设置

如果您尝试根据tailwindcss的官方方法在Angular上安装tailwind，配置会变得非常复杂和难以处理。因此，本次我想要介绍的是使用@ngneat/tailwind模块，它可以几乎为您处理所有复杂的配置，让您能够在Angular中轻松地使用tailwind。

npm：@ngneat/tailwind

如果使用@angular/material，请先进行安装。

如果要使用Angular Material，请先安装@angular/material，然后再安装@ngneat/tailwind。如果顺序相反，将导致冲突并导致@angular/material的安装失败。

> ng add @angular/material

安装@ngneat/tailwind

您可以使用以下命令安装@ngneat/tailwind。

> ng add @ngneat/tailwind

然而，如果Angular CLI的版本低于11.1.0，则似乎需要将@ngneat/tailwind的版本指定为5.2.5。

> ng add @ngneat/tailwind@5.2.5

然后会出现如下的消息，根据需要逐步回答。

? Would you like to enable dark mode? (Use arrow keys)
> none
  class
  media

如果没有特殊情况，我会选择“无”。

? Would you like to use tailwind directives & functions in component styles? (might increase build time) (y/N)

如果没有特别的话，我会选择N。

? What @tailwindcss plugins do you want to enable? (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) aspect-ratio
 ( ) forms
 ( ) line-clamp
 ( ) typography

如果在这里勾选了，所选的插件将会添加到tailwind.config.js中。暂时来说，我会将所有选项都勾选上。

...
    plugins: [
      require('@tailwindcss/aspect-ratio'),
      require('@tailwindcss/forms'),
      require('@tailwindcss/line-clamp'),
      require('@tailwindcss/typography')
    ],
...

当安装完成后，将新建tailwind.config.js和webpack.config.js文件。
如果一切顺利，您应该可以立即在Angular上使用tailwindcss了。

试用一下

我创建了一个新的Angular应用程序来进行验证，并安装了@angular/material和@ngneat/tailwind。
以以下模板app.component.html为例，我想尝试添加tailwind的类。

顺便说一下，tailwind的类名可以很容易地在官方文档中找到。对于懂CSS的人来说，可以比较快地使用起来。

这是没有样式的状态。

<div>
  <div>
    <div>
      <p>
        Is it OK?
      </p>
    </div>
    <div>
      <div>
        <button>
          OK
        </button>
      </div>
      <div>
        <button>
          Cancel
        </button>
      </div>
    </div>
  </div>
</div>

执行结果是这样的样子。 shì de .)

这是通过Tailwind添加样式的结果。

<div class="h-screen w-screen pt-6 bg-gray-50">
  <div class="w-48 h-48 mx-auto flex flex-col justify-evenly bg-white shadow overflow-hidden sm:rounded-lg">
    <div app-text class="mx-auto text-2xl font-medium">
      <p class="w-full h-full align-middle text-center">Is it OK?</p>
    </div>
    <div class="mx-auto flex flex-row content-center justify-center">
      <div class="w-16 h-10 mr-4">
        <button class="w-full h-full border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-yellow-600 hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-black">
          OK
        </button>
      </div>
      <div class="w-16 h-10">
        <button class="w-full h-full border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-black">
          Cancel
        </button>
      </div>
    </div>
  </div>
</div>

以下是执行结果。

因此，现在可以在HTML中表达样式而无需使用CSS来编写样式。

闲聊

使用组件设计可以解决一次性在HTML中记录所有样式看起来笨拙而困难的问题。我认为应该将控件外观相关的样式委托给子组件，将布局相关的样式（如margin和flex）委托给父组件。通过这种使用方式，可以省去每次都在CSS文件中记录布局相关样式或考虑类名的BEM命名法的需要，从而提高工作效率。

相关文章: 【Angular】关于最佳组件设计的思考：页面布局-展示者结构

让@ngneat/tailwind处理复杂设置

如果使用@angular/material，请先进行安装。

安装@ngneat/tailwind

推荐给VSCode的扩展功能

试用一下

闲聊