如何使用烧瓶-DEV365 开发者社区

tailwindcss是一种实用第一的CSS框架，用于快速创建自定义用户界面。使用TailWindCSS的主要优点是它是一个高度可自定义的低级CSS框架，使用户可以完全控制它。

这是一个公用事业第一的CSS框架，这意味着它提供了实用类别来构建自定义设计的情况，而无需像我们这样做的那样编写CSS。它结束了用于CSS类和ID的怪异名称的使用。

在本文中，我们将学习如何将parwindcss合并到我们的烧瓶应用中。

构建烧瓶应用

安装烧瓶

创建烧瓶应用程序之前，我们将首先开始安装。打开终端并运行以下命令。

pip install flask

创建烧瓶服务器

接下来，我们将建立创建烧瓶服务器的管道。首先创建一个文件夹，我们将文件放置在该文件夹中，然后在该文件夹中创建一个app.py文件。

然后，我们将创建一个名为templates的子文件夹，我们将在其中存储HTML文件，然后创建另一个名为static的子文件夹，该子文件将为我们的前端保留样式，脚本和静态图像。

flask_folder/
├── app.py
├── static
└── templates

在我们的app.py文件中，我们将添加以下代码来创建烧瓶服务器

from flask import Flask, render_template

app = Flask(__name__)


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


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

上面的代码将创建一个带有路由的简单烧瓶服务器，该路由将负责从我们尚未创建的index.html文件显示网页。

在模板中添加一个名为index.html的新文件 subfolder。

在我们的index.html文件中添加以下html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>Hi, there!!</h1>
</body>
</html>

让我们通过在终端中运行以下命令来启动服务器

python app.py

这将启动我们的开发服务器，我们可以在http://127.0.0.1:5000上看到我们的网页。

将tailwindcss添加到烧瓶中

现在，我们将执行以下步骤将CSS框架（parwindcss）合并到我们的烧瓶应用中。

安装tailwindcss

我们可以使用npm或yarn在我们的项目文件夹中安装依赖项。分别使用 npm 和 YARN 在终端中运行以下命令。

npm install tailwindcss

或

yarn add tailwindcss

我正在为本教程使用NPM。

运行命令后，安装将开始，并且将在根目录中创建以下文件。

flask_folder/
├── node_modules/
├── package.json
└── package-lock.json

创建配置文件

在终端中运行以下命令以创建配置文件。

npx tailwindcss init

命令将在项目的根部创建一个最小的tailwind.config.js文件。

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

我们需要对tailwind.config.js的content部分进行一些修改，以配置所有HTML模板的路径。

module.exports = {
  mode: 'jit',
  content: ["./templates/**/*.{html,htm}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

我们刚刚添加了templates文件夹，所有html文件都将进入并使用glob pattern，这使得易于匹配项目中的所有内容文件。

使用*匹配除斜线和隐藏文件以外的任何内容
使用**匹配零或更多目录
在{}之间使用逗号单独的值与选项列表匹配

此外，我们启用了jit（即时）模式，因为JIT模式通过扫描模板文件生成CSS按需生成CSS。

创建CSS文件并添加尾风指令

在static文件夹中，创建两个名为src和css的CSS文件夹，分别在这些文件夹中添加input.css和main.css文件。

flask_folder/
└── static/
    ├── css/
    │   └── main.css
    └── src/
        └── input.css

现在，在src/input.css文件中添加以下代码，以将尾风的基础，组件和实用程序样式插入CSS。

src/input.css文件

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

开始构建过程

要从预处理器指令生成CSS，我们需要在终端中运行以下命令。

npx tailwindcss -i ./static/src/input.css -o ./static/css/main.css --watch

注意：每次将CSS添加到HTML文件中以查看更改时，我们都必须运行上述代码。因此，最好的做法是使上述命令成为脚本，它将重建CSS，而无需每次运行CSS构建过程代码。

在package.json文件中添加scripts

{
  "dependencies": {
    "tailwindcss": "^3.1.8"
  },

  "scripts": {
    "create-css": "npx tailwindcss -i ./static/src/input.css -o ./static/css/main.css --watch"
  }
}

现在，在终端中运行脚本create-css

npm run create-css

上面的命令将无需在更改HTML文件内的代码后每次运行CSS构建过程。

用parwindcss创建前端

现在，要测试它是否有效，请使用tailwindcss的实用程序类型模板。前往templates/index.html并编辑文件。

链接index.html内部标签中的css/main.css文件。

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

templates/index.html

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

<body>
<section class="text-gray-600 body-font">
  <div class="container px-5 py-24 mx-auto">
    <h1 class="text-3xl font-medium title-font text-gray-900 mb-12 text-center">Testimonials</h1>
    <div class="flex flex-wrap -m-4">
      <div class="p-4 md:w-1/2 w-full">
        <div class="h-full bg-gray-100 p-8 rounded">
          <p class="leading-relaxed mb-6">Synth chartreuse iPhone lomo cray raw denim brunch everyday carry neutra before they sold out fixie 90's microdosing. Tacos pinterest fanny pack venmo, post-ironic heirloom try-hard pabst authentic iceland.</p>
          <a class="inline-flex items-center">
            <img alt="testimonial" src="https://dummyimage.com/106x106" class="w-12 h-12 rounded-full flex-shrink-0 object-cover object-center">
            <span class="flex-grow flex flex-col pl-4">
              <span class="title-font font-medium text-gray-900">Holden Caulfield</span>
              <span class="text-gray-500 text-sm">UI DEVELOPER</span>
            </span>
          </a>
        </div>
      </div>
      <div class="p-4 md:w-1/2 w-full">
        <div class="h-full bg-gray-100 p-8 rounded">
          <p class="leading-relaxed mb-6">Synth chartreuse iPhone lomo cray raw denim brunch everyday carry neutra before they sold out fixie 90's microdosing. Tacos pinterest fanny pack venmo, post-ironic heirloom try-hard pabst authentic iceland.</p>
          <a class="inline-flex items-center">
            <img alt="testimonial" src="https://dummyimage.com/107x107" class="w-12 h-12 rounded-full flex-shrink-0 object-cover object-center">
            <span class="flex-grow flex flex-col pl-4">
              <span class="title-font font-medium text-gray-900">Alper Kamu</span>
              <span class="text-gray-500 text-sm">DESIGNER</span>
            </span>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>
</body>
</html>

使用tailwindcss

的烧瓶应用

结论

通常，开发人员更喜欢使用Bootstrap为前端构建UI，但是在本教程中，我们将parwindcss集成到了烧瓶应用程序中。

我们已经介绍了本教程中的以下步骤

创建了一个演示烧瓶应用程序。
将parwindcss安装到项目根目录中并配置。
在CSS文件中添加了尾风指令。
运行命令从指令生成CSS。

这就是目前的全部

保持编码