如何在AngularJS中设置Tailwind CSS

在这篇文章中，我们将看到如何在AngularJS中设置Tailwind CSS，并将通过实例了解不同的实现方式。

Tailwind CSS是一个实用至上的CSS框架，用于快速构建自定义用户界面。它是一种很酷的方式，可以编写内联样式，并实现一个令人敬畏的界面，而无需编写一行自己的CSS。

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

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

设置新的Angular项目：

打开CMD(Window)或终端(Linux)，写下命令。

ng new project-name

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

让他们完成上述过程。

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

ng serve --open

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

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

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

Using CDN
使用PostCSS和命令行配置

Using CDN:

在你喜欢的代码编辑器中打开该项目。
浏览angular项目的index.html。
只要在标题部分粘贴下面这行字。

<script src="https://cdn.tailwindcss.com"></script>

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

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

实例1：本实例描述了在AngularJS中通过使用CDN链接实现Tailwind CSS的基本实现。

<!DOCTYPE html>
<html>
  
<head>
    <title>Tailwind-AngularJS Example</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
</head>
  
<body>
    <div class="font-sans text-center">
        <h1 class="text-green-800 text-5xl p-7">
            GeeksforGeeks
        </h1>
        <p class="text-indigo-700 text-3xl">
            A Computer Science Portal for Geeks
        </p>
  
    </div>
</body>
  
</html>

输出:

如何在AngularJS中设置Tailwind CSS？

Using PostCSS:

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

npm install tailwindcss postcss autoprefixer

上面的命令安装需要一个库，以便tailwind运行。让我们来配置tailwind的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网站。

示例2：本示例描述了在AngularJS中通过使用npm安装tailwind CSS的基本实现。

<div class="font-serif text-center">
    <h1 class="text-green-800 text-5xl p-7">
        GeeksforGeeks
    </h1>
    <p class="text-indigo-700 text-3xl">
        A Computer Science Portal for Geeks
    </p>
  
</div>

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent{}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
  
import { AppComponent } from './app.component';
  
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule{}

输出:

如何在AngularJS中设置Tailwind CSS？