如何在 AngularJS 中设置 Tailwind CSS？

什么是顺风 CSS？

根据官方文档，Tailwind CSS 是一个实用程序优先的 CSS 框架，用于快速构建自定义用户界面。这是编写内联样式并实现令人敬畏的界面的一种很酷的方式，而无需编写您自己的单行 CSS。

什么是角？

Angular 是一个使用 HTML 和 TypeScript 构建单页客户端应用程序的平台和框架。 Angular 是用 TypeScript 编写的。它以一组 TypeScript 库的形式实现核心和可选功能，您可以将它们导入到您的应用程序中。

因此，让我们开始创建一个新的 Angular 项目并在 Angular 项目中设置 Tailwind CSS。

设置新的 Angular 项目：

• 打开 CMD (Window) 或 Terminal (Linux) 并写入命令。

ng new project-name

• 运行上述命令后，它会问一些问题，如下所示，与 CSS 相关，这基本上是您要在 Angular 项目中使用的 CSS 类型。让我们为这个项目选择 CSS。
• 它还要求路由让通过说是来启用它。

让他们完成上述过程。

• 一旦过程完成，就会有项目文件夹。使用 CMD 或终端的更改目录命令进入文件夹并运行以下命令。

ng serve --open

• 它将在浏览器中打开 Angular 的默认页面。

Angular 设置完成，让我们开始在 Angular 中安装 Tailwind CSS。

在 Angular 项目中安装 Tailwind CSS：有两种方法可以在 Angular 项目中添加 Tailwind CSS。

• 使用 CDN
• 使用 PostCSS 和命令行配置

使用 CDN：

• 在您喜欢的代码编辑器中打开项目。
• 浏览 Angular 项目的 index.html。
• 只需将下面的行粘贴到头部。

它将使用互联网包括项目中顺风的所有库。这是一种包含顺风的简单方法。

注意：它需要互联网。如果互联网不可用，那么它将无法正常工作。

使用 PostCSS：

• 在 cmd 或终端中打开项目目录并运行以下命令。

npm install tailwindcss postcss autoprefixer

• 上面的命令安装需要库才能运行顺风。让我们配置顺风 css 和 postcss。为此，我们可以在项目文件中创建一个名为tailwind.config.js和postcss.config.js的文件。

tailwind.config.js

module.exports = {
    purge: [],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
}

postcss.config.js

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

• 现在，tailwind CSS 已准备好在您的 Angular 项目中使用，并且已成功设置到项目中。

现在你可以使用 tailwind 内联 CSS 并且更脏你可以参考 tailwind 网站。

参考： https://tailwindcss.com/