如何将TailwindCSS集成到Flask应用程序中

DebugUsery
812 阅读7分钟

将TailwindCSS集成到Flask应用程序中

TailwindCSS是一个实用至上的CSS框架，用于构建前端应用程序。TailwindCSS与其他类型的CSS框架不同，它让用户完全控制自己的设计。

在TailwindCSS中，你不是在你的代码中添加晦涩难懂的CSS类，而是使用实用类来创建你的组件，对每一个造型都有你想要的控制。所有这些都不需要写任何一行CSS。

前提条件

为了在本文中进行演示，我将使用Python3、Flask和JavaScript包管理器（npm或yarn）。

我假设读者对Python和Flask有基本的了解，并且已经对TailwindCSS非常熟悉了。

需要具备以下条件。

  • Python3
  • Node.js 12.13.0或更高版本
  • npm或yarn
  • Flask
  • 你喜欢的文本编辑器
  • 使用TailwindCSS的知识

构建一个简单的Flask应用

安装Flask

我们将从创建一个真正简单的Flask服务器开始，它能够代表我们渲染前端模板。

首先，我们打开终端，使用Python的包管理器安装Flask，如下所示。

pip install flask

这将为我们在电脑上整齐地安装Flask，如果你已经安装了它，你可以跳过这一步。如果你想的话，你也可以选择在虚拟环境中安装它。

创建Flask服务器

下一步是创建一个简单的Flask服务器，它将为我们渲染前端模板。创建一个新的文件夹（任何你想要的地方）来存放我们的文件，并在该文件夹中创建一个名为app.py 的新文件。

同时创建一个名为templates 的子文件夹；所有HTML文件都将放在这里。接下来，我们将创建另一个子文件夹，名为static 。这个文件夹将存放所有的静态文件，包括CSS文件、脚本和我们的前端模板的图片。

当你完成后，这个文件夹应该看起来像这样。

projectfolder/
   - app.py
   - templates/
   - static/

现在在app.py中我们将添加以下几行代码来创建一个服务器。

from flask import Flask, render_template

app = Flask(__name__)


@app.route("/")
@app.route("/index")
def index():
	return render_template("index.html")


if __name__ == '__main__':
	app.run(debug=True)

上面的代码块创建了一个简单的服务器，它有一个端点（或路由），可以渲染（或显示）一个网页，这个网页应该是来自一个叫做index.html 的文件，正如代码中所看到的。然而，我们还没有创建那个文件。

记住，我提到所有的HTML文件都在我们之前创建的templates文件夹中。我们将进入那个文件夹，添加一个名为index.html 的新文件，以便我们的Flask服务器可以看到它。

在index.html ，我们可以添加一个简单的 "hello world "h1标签，如下所示。

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>

  <body>
    <h1>Hello World</h1>
  </body>
</html>

我们将保存该文件，并通过终端使用以下命令测试运行我们的服务器。

python app.py

一旦服务器运行起来，就到:

http://localhost:5000/index 来测试服务器，你应该看到 文件中的 "hello world"。index.html

demo1

安装TailwindCSS

为了安装Tailwind，我们可以使用yarn或npm（取决于你的系统上有哪一个）。我们使用cd 命令从终端导航到我们之前创建的static 文件夹。

一旦到了那里，我们将使用init 命令来设置一个新的Node.js环境，这将允许我们使用npm或yarn来安装TailwindCSS，如下所示。

npm init

或者用yarn。

yarn init

这样做会创建一个名为package.json 的新文件，该文件会跟踪我们项目中已安装的（JavaScript）依赖项。我们可以把它看作是Python项目中保存依赖关系的requirements.txt 文件。

下一件事是运行安装命令来实际安装TailwindCSS，其操作方法如下。

npm install tailwindcss

或者用yarn。

yarn add tailwindcss

如果你没有npm，你可以安装Node.js，因为它自带了npm。

一旦完成这些，你应该看到安装时在static 文件夹中包括一些文件夹，其中一些包括。

  • node_modules/ : 这是tailwind的依赖项所在的地方。
  • package.json
  • yarn.lock（我使用了yarn）

将TailwindCss添加到我们的Flask应用程序中

第一步是添加一些必要的文件，以便让tailwindcss工作。为了使事情更简单，我们将在先前的static 文件夹中创建一个名为src 的新文件夹，在src 文件夹中，我们将添加一个名为style.css 的文件，这就是tailwindCss指令的位置，我们稍后将看到。

为了使事情清晰，项目的文件夹结构应该如下。

projectfolder/
   - app.py
   - templates/
   - static/
     - src/
       - style.css

在这个style.css 文件中，我们将按照Tailwindcss的规定添加以下内容。

@tailwind base;
@tailwind components;
@tailwind utilities;

这些在文档中被称为预处理器指令，你可以把它们看作是像C++这样的语言的预处理器指令，这些指令基本上是在编译时粘贴大量的实用CSS类（很多！）。这个过程中产生的CSS就是我们要链接到flask模板的样式。

在我们生成CSS之前，让我们准备一个文件，把它倒入其中。在static 文件夹中，我们将创建一个名为css 的新文件夹，所有的样式表都将放在这里，包括我们即将生成的样式表。在这个文件夹中，我们将创建一个名为main.css 的新文件，我们的tailwind工具类将放在这里。

编译预处理器指令以生成CSS

为了从预处理器指令中生成CSS，我们需要在终端使用npx ，这是npm附带的一个工具（所以确保你已经安装了npm，你可能已经安装了Node.js），发出一个命令。接下来我们将运行下面的命令来编译并将结果输出到main.css ，供我们使用。

npx tailwindcss -i ./src/style.css -o css/main.css

这将产生大量的实用css类，供我们在服务器模板中使用。

用TailwindCSS构建我们的前端模板

现在我们已经生成了tailwind css，我们现在可以使用实用类来设计我们的模板。我们将前往先前的templates 文件夹，在那里我们添加了index.html 文件，并编辑它，使用tailwindcss实用类为它添加一些更多的元素和样式。

在index.html ，添加以下内容。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Beans Love Beers</title>
  <link rel="stylesheet" href="{{url_for('static',filename='css/main.css')}}">
</head>

<body>
  <div class="bg-green-300 px-3 py-1">
    <h2 class="text-3xl font-light text-white m-0">Beans Love Beers</h2>
  </div>
  <!-- Search Bar -->
  <div class="container">
    <input type="text" placeholder="Search for beer..."
      class="border-2 ml-64 border-gray-700 w-2/5 mt-10 py-3 px-4"></input>
    <button class="bg-blue-700 text-xl hover:bg-blue-500 text-white py-2 px-3">Search</button>
  </div>
  <!-- Selection -->
  <div class="container">
    <div class="grid gap-8 grid-cols-3 mt-5 ">
      <div
        class="transition duration-500 ease-in-out flex py-3 px-2 hover:bg-blue-400 transform hover:-translate-y-1 hover:scale-110 hover:text-white hover:shadow-none hover:rounded border border-gray-300 shadow-lg">
        <img src="img/logo.jpg" class="h-16 w-12 mr-20 ml-8 mt-10" alt="Image">
        <div class="w-3/5 mr-0">
          <h2 class="text-gray-800 font-bold">Buzz</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore et excepturi autem iure molestias doloribus
            ipsa praesentium.</p>
        </div>
      </div>
      <div
        class="transition duration-500 ease-in-out flex py-3 px-2 hover:bg-blue-400 transform hover:-translate-y-1 hover:scale-110 hover:text-white hover:shadow-none hover:rounded border border-gray-300 shadow-lg"
        class="transition duration-500 ease-in-out flex py-3 px-2 hover:bg-blue-400 transform hover:-translate-y-1 hover:scale-110 hover:text-white hover:shadow-none hover:rounded border border-gray-300 shadow-lg">
        <img src="img/Asset 140.png" class="h-16 w-12 mr-20 ml-8 mt-10" alt="Image">
        <div class="w-3/5 mr-0">
          <h2 class="text-gray-800 font-bold">Buzz</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore et excepturi autem iure molestias doloribus
            ipsa praesentium</p>
        </div>
      </div>
      <div
        class="transition duration-500 ease-in-out flex py-3 px-2 hover:bg-blue-400 transform hover:-translate-y-1 hover:scale-110 hover:text-white hover:shadow-none hover:rounded border border-gray-300 shadow-lg"
        class="transition duration-500 ease-in-out flex py-3 px-2 hover:bg-blue-400 transform hover:-translate-y-1 hover:scale-110 hover:text-white hover:shadow-none hover:rounded border border-gray-300 shadow-lg">
        <img src="img/Asset 150.png" class="h-16 w-12 mr-20 ml-8 mt-10" alt="Image">
        <div class="w-3/5 mr-0">
          <h2 class="text-gray-800 font-bold">Buzz</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore et excepturi autem iure molestias doloribus
            ipsa praesentium.</p>
        </div>
      </div>
      <div
        class="transition duration-500 ease-in-out flex py-3 px-2 hover:bg-blue-400 transform hover:-translate-y-1 hover:scale-110 hover:text-white hover:shadow-none hover:rounded border border-gray-300 shadow-lg"
        class="transition duration-500 ease-in-out flex py-3 px-2 hover:bg-blue-400 transform hover:-translate-y-1 hover:scale-110 hover:text-white hover:shadow-none hover:rounded border border-gray-300 shadow-lg">
        <img src="img/Asset 160.png" class="h-16 w-12 mr-20 ml-8 mt-10" alt="Image">
        <div class="w-3/5 mr-0">
          <h2 class="text-gray-800 font-bold">Buzz</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore et excepturi autem iure molestias doloribus
            ipsa praesentium.</p>
        </div>
      </div>
      <div
        class="transition duration-500 ease-in-out flex py-3 px-2 hover:bg-blue-400 transform hover:-translate-y-1 hover:scale-110 hover:text-white hover:shadow-none hover:rounded border border-gray-300 shadow-lg"
        class="transition duration-500 ease-in-out flex py-3 px-2 hover:bg-blue-400 transform hover:-translate-y-1 hover:scale-110 hover:text-white hover:shadow-none hover:rounded border border-gray-300 shadow-lg">
        <img src="img/logo.jpg" class="h-16 w-12 mr-20 ml-8 mt-10" alt="Image">
        <div class="w-3/5 mr-0">
          <h2 class="text-gray-800 font-bold">Buzz</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore et excepturi autem iure molestias doloribus
            ipsa praesentium.</p>
        </div>
      </div>
      <div
        class="transition duration-500 ease-in-out flex py-3 px-2 hover:bg-blue-400 transform hover:-translate-y-1 hover:scale-110 hover:text-white hover:shadow-none hover:rounded border border-gray-300 shadow-lg"
        class="transition duration-500 ease-in-out flex py-3 px-2 hover:bg-blue-400 transform hover:-translate-y-1 hover:scale-110 hover:text-white hover:shadow-none hover:rounded border border-gray-300 shadow-lg">
        <img src="img/Asset 150.png" class="h-16 w-12 mr-20 ml-8 mt-10" alt="Image">
        <div class="w-3/5 mr-0">
          <h2 class="text-gray-800 font-bold">Buzz</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore et excepturi autem iure molestias doloribus
            ipsa praesentium</p>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

注意到CSS文件的链接指向css/main.css 文件，而不是src/style.css 文件中的预处理指令。

<link rel="stylesheet" href="{{url_for('static',filename='css/main.css')}}" />

测试运行

保存索引文件，如果服务器仍在运行，进入localhost:5000/index ，你应该看到更新后的索引页看起来更好，其样式如下所示。

demo2

这就是你所拥有的!

总结

在这篇文章中，我们已经介绍了如何构建一个简单的Flask应用程序以适应TailwindCss包。我们看到了如何安装Tailwindcss，以及如何从它的预处理器指令中生成CSS到我们选择的文件中。最后，我们看到了如何在我们的flask模板中使用它。

你现在应该能够将Tailwindcss安装到你的Flask项目中，并成功地将其集成到你的应用程序中。虽然本文的重点是在单一模块的Flask应用程序中集成Tailwindcss，但你并不限于以这种方式或仅在单一文件的Flask应用程序中集成Tailwindcss。

你可以在更复杂的结构中使用Tailwindcss，如蓝图。同时使其仅适用于特定蓝图所拥有的某些模板。

而在其他模板中仍有使用常规css样式的自主权。因此，我恳请你在继续你作为Flask开发者的旅程中，探索和尝试使用Tailwindcss。

avatar
文章
阅读
粉丝