顺风 api_顺风顺水

最新推荐文章于 2024-02-03 15:56:18 发布

郝ren

最新推荐文章于 2024-02-03 15:56:18 发布

阅读量124

点赞数

文章标签： python

原文链接：https://medium.com/@mattmilici/get-tailwind-up-running-c454199f72ec

版权

顺风 api

Goodbye Bootstrap. Hello Tailwind!

再见了。你好，尾风！

Tailwind is a CSS framework that allows developers to easily and quickly build custom components using low-level utility classes. With Tailwind, you can create an element (e.g., button, card, form, etc.) from scratch without fighting predesigned components like you would with Bootstrap.

Tailwind是一个CSS框架，允许开发人员使用低级实用程序类轻松快速地构建自定义组件。使用Tailwind，您可以从头开始创建元素(例如，按钮，卡片，表单等)，而无需像使用Bootstrap那样与预先设计的组件作斗争。

The remainder of this article provides step by step instructions on how to install and setup Tailwind. Please note, this article assumes you are using Visual Studio, node, npm (automatically installed with node), and Chrome. Now enough chat. Let’s get started.

本文的其余部分提供了有关如何安装和设置Tailwind的逐步说明。请注意，本文假设您使用的是Visual Studio ， node ，npm(随node自动安装)和Chrome 。现在足够聊天。让我们开始吧。

Create a New Project

创建一个新项目

First, let’s start by creating a new directory for our project and initializing it. For this example, I will name the directory “tailwindExample,” but you can use whatever makes the most sense to you.

首先，让我们为项目创建一个新目录并对其进行初始化。对于此示例，我将目录命名为“ tailwindExample”，但您可以使用最适合您的内容。

Install Tailwind, PostCSS, and Autoprefixer

安装Tailwind，PostCSS和Autoprefixer

Next, we will want to install Tailwind, PostCSS, and Autoprefixer. Once initialized, this will create an empty tailwind.config.js file in the “tailwindExample” directory.

接下来，我们将要安装Tailwind，PostCSS和Autoprefixer。初始化后，这将在“ tailwindExample”目录中创建一个空的tailwind.config.js文件。

npm install tailwindcss postcss-cli autoprefixer
npx tailwind init

PostCSS is a framework that can process and transform CSS with JavaScript plugins (e.g., unique features/functionality that can be easily accessed in your programs). Tailwind does not include vendor prefixes, so Autoprefixer will automatically compile your CSS and determine if a prefix is needed by using Can I use. This allows CSS features (or properties) to be seen on any browser.

PostCSS是一个可以使用JavaScript插件处理和转换CSS的框架(例如，可以在程序中轻松访问的独特功能)。 Tailwind不包含供应商前缀，因此Autoprefixer将自动编译CSS并通过使用我可以使用来确定是否需要前缀。这样可以在任何浏览器上看到CSS功能(或属性)。

Create a PostCSS Config Javascript File

创建一个PostCSS Config Javascript文件

First, create a file named “postcss.config.js” in the “tailwindExample” directory. This is where we will provide the plugins we will be using. The snippet below offers the two packages we will be using.

首先，在“ tailwindExample”目录中创建一个名为“ postcss.config.js”的文件。我们将在这里提供将要使用的插件。下面的代码片段提供了我们将要使用的两个软件包。

module.exports = {
plugins: [
require("tailwindcss"),
require("autoprefixer"),
]};

Create a Tailwind CSS File

创建一个Tailwind CSS文件

Now create a new file named “tailwind.css” and add the following code. Tailwind will search the project for these markers and replace them with the base styles, components, and utilities provided by Tailwind.

现在创建一个名为“ tailwind.css”的新文件，并添加以下代码。 Tailwind将在项目中搜索这些标记，并将其替换为Tailwind提供的基本样式，组件和实用程序。

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

Update Package.json

更新Package.json

Navigate to your “package.json” file and update the test script to read what is currently on line 7 below. Now go into the terminal and run “npm run build.” If done correctly, you will see the dist/scripts/tailwind.css file path appear in your project.

导航到“ package.json”文件并更新测试脚本以读取下面第7行上的当前内容。现在进入终端并运行“ npm run build”。如果正确完成，您将看到dist / scripts / tailwind.css文件路径出现在您的项目中。

You’ll notice the newly created “tailwind.css” file has all of the base styles, utilities, and components already added.

您会注意到新创建的“ tailwind.css”文件已添加了所有基本样式，实用程序和组件。

Link Tailwind

游戏内链接

Last but not least, head over to your HTML page and, in the head, add a style link. You’re now ready to start using Tailwind in your CSS file. I recommend you go straight to the Tailwind Docs and get going!

最后但并非最不重要的一点，转到您HTML页面，并在标题中添加样式链接。现在您可以开始在CSS文件中使用Tailwind。我建议您直接去Tailwind Docs开始！

<link rel=”stylesheet” href=”dist/scripts/tailwind.css”/>

Summary

摘要

Tailwind has some of the best docs I have seen. If this article didn’t answer all of your questions, I recommend using the following links.

Tailwind有一些我见过的最好的文档。如果本文不能回答您所有问题，建议您使用以下链接。