首页 > 其他分享> > 如何设置您的第一个 Tailwind CSS 项目

如何设置您的第一个 Tailwind CSS 项目

2022-09-07 00:30:42 作者：互联网

如何设置您的第一个 Tailwind CSS 项目

与任何其他 CSS 框架不同，Tailwind CSS 没有固执己见，它允许您为任何项目创建组件和设计元素。它不是唯一实用程序优先的 CSS 框架，但它是迄今为止最受欢迎的。

在本 tailwind CSS 教程结束时，您应该能够快速建立一个 tailwind CSS 项目，自己配置您的 tailwind CSS 并使用 tailwind CSS 框架构建一个简单的卡片。

表中的内容

顺风 CSS 简介
先决条件
为您的项目设置 Tailwind CSS
向样式表添加顺风
使用 Tailwind 配置和处理 CSS
顺风 CSS 处理
添加 Tailwind CSS 第一个项目
使用 Tailwind CSS 构建简单的卡片
结论

在我们开始学习顺风 CSS 教程之前，下面是我们将要创建的项目的图像。

Tailwind CSS 简介

Tailwind CSS 于 2017 年 11 月 1 日在 Github 上首次发布。这是一个开源项目。截至 2020 年 8 月，已有超过 1000 万人下载了该框架。

这些使它成为增长最快的 CSS 框架之一。 2020 年 9 月，全球有超过 100 万开发人员访问了 Tailwind 官方文档。

Tailwind CSS 与其他 CSS 框架不同，因为它是实用程序优先的 CSS 框架，不像 Bootstrap 是面向对象的框架。你可以在这里查看我比较这两个框架的帖子。

这些构建用户界面的新方法使框架高度可定制。

先决条件

同时，在我们继续之前，我们将了解在项目中使用 tailwind CSS 所需的一些技能。

基本 HTML
基本 CSS
基本的 JavaScript

为您的项目设置 Tailwind CSS

您可以通过多种方式设置 Tailwind CSS 项目。虽然最快的方式是使用 CDN，但还是推荐使用包管理器的方式。您可以查看我关于在 Tailwind CSS 项目中使用 CDN 方法的帖子。

使用包管理器将允许您通过 PostCSS 使用配置。

在本 tailwind 教程中，我将向您展示如何使用 NPM 包含最新版本的 Tailwind CSS 并创建 Tailwind 配置文件。

要使用此方法，您必须确保您的机器中安装了 Node 和 NPM。

然后你可以去你的终端创建你的项目文件夹。要创建项目文件夹，请运行以下命令。

 ```r $ mkdir tailwind-project-01 ```

现在，切换到新目录

 ```r $ cd tailwind-project-01 ```

您现在可以使用以下 NPM 命令继续创建新的 package.json

 ```r $ npm 初始化 ```

上面的命令所做的是帮助我们管理节点包管理器和依赖项。

下一步是安装最新版本的 tailwind CSS 并保存依赖项。您可以通过在终端上运行以下命令来执行此操作。

 ``` npm install @latest tailwindcss –save ```

此命令使 Tailwind CSS 在我们的 node_modules 文件夹中可用。

向样式表添加顺风

安装tailwind CSS 项目后，下一步是将tailwind 的基础、组件和实用程序样式注入到您创建的CSS 文件中。这是通过使用自定义 @tailwind 指令来完成的。

此外，您必须首先创建一个名为 style.css（或您选择的任何名称）的新 CSS 文件并添加以下代码行

 ```css @尾风基地； @tailwind 组件； @tailwind 实用程序； ```

这行代码在处理文件时使用 Tailwind 与来自 Tailwind 的实际 CSS 样式进行交换。

使用 Tailwind 配置和处理 CSS

如前所述，最推荐的设置 Tailwind CSS 项目的方法是使用包管理器安装 Tailwind CSS。

这是因为当您使用其他方法时，您无法按照您想要的方式配置组件

但是，包管理器允许我们创建配置文件。

我们可以继续创建一个配置文件。您可以通过在终端上运行以下命令来执行此操作

 ```r npx tailwindcss 初始化 ```

上述命令将生成一个名为 tailwind.config.js 的文件。该文件将包含以下内容

 ```javascript // tailwind.config.js 模块.exports = { 未来： { }， 清除：{}， 主题： { }， 延长： { }， }, 变体：{}， 插件：[]， } ```

您可以继续添加以下插件

 ```javascript 插件：{ 尾风css：{}， 自动前缀：{}， } } ```

顺风 CSS 处理

在这个阶段，我们可以继续编译我们的 style.css 文件来创建 main.css 文件。 output.css 文件将包含在我们的项目中。

为此，我们可以继续运行以下命令

 npx tailwindcss 构建 main.css –o main.css

运行此命令后，您将看到在您的文件夹结构中生成了一个新的 main.css 文件。

此文件将保存基于您首次创建的配置的默认 Tailwind CSS 实用程序类。

添加 Tailwind CSS 第一个项目

我们将把 Tailwind CSS 添加到我们的第一个项目中。您可以继续在根项目目录中创建一个 index.html 文件。

在 HTML 文件中，将 main.css 包含到 HTML 文件项目的 head 标记中。它应该看起来像这样。

 ```html  
 <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8"> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0"> <link rel=”stylesheet” href=”styles.css”> <title>顺风牌</title> </head>  
 ```

太好了，您已成功将 Tailwind CSS 添加到您的第一个项目中。

在下一节中，我们将使用我们刚刚创建的项目创建一个简单的卡片，并为其使用一些 Tailwind CSS 实用程序类。

使用 Tailwind CSS 构建简单的卡片

在本节中，我们将演示如何在您的项目中使用 Tailwind CSS 实用程序。我们要构建的简单卡片将如下图所示。

在我们最初创建的 index.html 中，我们将创建一个包含卡片的包装 div。

 <div class=”flex space-x-10 justify-center mt-4"></div>

现在我们已经创建了包装器，我们可以继续在包装器内创建卡片。

我们将在我们的元素中包含实用程序类。

    
    
     <body> <div class=”flex space-x-10 justify-center mt-4"> <div class=”max-w-md py-4 px-8 bg-white shadow-lg rounded-lg my-20"> <div class=”flex justify-center md:justify-end -mt-16"> <img 类=”w-20 h-20 对象覆盖圆形-完整边框-2 边框-靛蓝-500” src=”图像/个人资料 one.jpg”> </div> <div> <h2 class=”text-text-3xl font-semibold text-indigo-500">程序员</h2> <p class=”mt-2 text-gray-600"> 非常感谢。它排斥 更粗糙 我会用其他方式来解释，最起码的快乐是他拥有的，拒绝它的快乐是腐败的。 </p> </div> <div class=”flex justify-end mt-4"> <a href=”#” class="text-xl font-medium text-indigo-500"> 大卫保罗 </a> </div> </div> <div class=”max-w-md py-4 px-8 bg-white shadow-lg rounded-lg my-20"> <div class=”flex justify-center md:justify-end -mt-16"> <img class=”w-20 h-20 object-cover rounded-full border-2 border-indigo-500" src=”图像/配置文件二.jpg”> </div> <div> <h2 class=”text-text-3xl font-semibold text-indigo-500"> 设计师 </h2> <p class=”mt-2 text-gray-600"> 非常感谢。它排斥 更粗糙 我会用其他方式来解释，最起码的快乐是他拥有的，拒绝它的快乐是腐败的。 </p> </div> <div class=”flex justify-end mt-4"> <a href=”#” class=”text-xl font-medium text-indigo-500">达芬科尔斯</a> </div> </div> </div> </body> </html> ```

我们的最后一个项目应该如下图所示。

##  结论

在我们的 Tailwind CSS 教程中，您学习了如何使用包管理器安装 Tailwind CSS，如何使用 Tailwind CSS 实用程序类构建简单的卡片，以及如何在项目中包含 Tailwind CSS。

#  创建令人惊叹的网站和网络应用程序

为您的 Web 应用程序或网站构建不同的自定义组件会变得非常有压力。这就是为什么我们决定建立对比。我们已经将一个包含 10000 多个组件、5 个管理仪表板和 23 个其他不同页面模板的 UI 套件组合在一起，用于将几乎任何类型的 Web 应用程序或网页构建到一个名为 Contrast Pro 的产品中。[ 试试对比专业](https://www.devwares.com/product/contrast-pro)

![](https://qanswer-1251273400.cos.ap-hongkong.myqcloud.com/post_images/3f026a61f470a0499ccfc04186941f0e.jpg)

Contrast React Bootstrap PRO 是一个多用途的专业模板，UI 工具包，用于构建您的下一个登陆、管理、SAAS、预启动等项目，具有干净、有据可查、精心制作的模板和 UI 组件。[ 了解有关对比度的更多信息](https://www.devwares.com/product/contrast-pro)

**资源**

[ 如何创建 Angular Bootstrap 侧边栏](https://www.devwares.com/blog/how-to-create-an-angular-bootstrap-sidebar/)

[ 如何创建响应式 Bootstrap 5 侧边栏](http://how%20to%20create%20a%20responsive%20bootstrap%205%20sidebar/)

[ 如何在 React 中使用 Tailwind CSS](http://how%20to%20use%20tailwind%20css%20in%20react/)

[ 如何设置您的第一个 Tailwind CSS 项目](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

[ Tailwind 3.0 终于面世了。这是所有主要变化](https://www.devwares.com/blog/tailwind-3.0-is-finally-out/)

[ 如何在 Vue.js 中安装 Tailwind CSS](https://www.devwares.com/blog/how-to-install-tailwind-css-in-vuejs/)

[ 如何在 React 中使用 Tailwind CSS](https://www.devwares.com/blog/how-to-use-tailwind-css-in-react/)

[ Tailwind Flex：如何使用 Tailwind CSS Flex](https://medium.com/p/59f6227b7091/edit)

[ 如何在项目中使用 Tailwind CSS 填充、边距和边框。](https://www.devwares.com/blog/how-to-use-tailwind-css-padding-margin-and-border-in-your-project/)

[ Tailwind CSS CDN-如何使用 Tailwind CSS JIT CDN](https://www.devwares.com/blog/how-to-use-the-tailwind-css-JIT-CDN//)

[ 如何在 HTML 中使用 Tailwind CSS](https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML/)

[ 如何使用 Laravel 安装 Tailwind CSS](https://www.devwares.com/blog/how-to-install-tailwind-css-in-laravel/)

[ Tailwind CSS 表格-如何创建 Tailwind CSS 表格](https://www.devwares.com/blog/how-to-create-tailwind-css-tables/)

[ Tailwind modal：如何创建 Tailwind CSS Modal](https://www.devwares.com/blog/how-to-create-tailwind-css-modal/)

[ 如何创建 Tailwind CSS 下拉菜单](https://www.devwares.com/blog/how-to-create-tailwind-css-dropdown/)

[ 如何为您的网站创建 Tailwind CSS 组件](https://www.devwares.com/blog/how-to-create-tailwind-css-components-for-your-website/)

[ 如何使用 Tailwind CSS 创建 React 表单。](https://www.devwares.com/blog/how-to-create-react-forms-using-tailwind-css/)

[ 如何创建漂亮的 Bootstrap 5 导航栏](https://www.devwares.com/blog/how-to-create-beautiful-bootstrap-5-navbars/)

[ 如何创建 Angular Bootstrap 侧边栏](https://www.devwares.com/blog/how-to-create-an-angular-bootstrap-sidebar/)

[ 如何在 React 中使用 Bootstrap 使用 React 库](https://www.devwares.com/blog/using-bootstrap-in-react/)

[ 如何使用 Tailwind CSS 宽度](https://www.devwares.com/blog/Tailwind-width/)

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/20674/23260700

标签：设置,Tailwind,tailwind,css,https,com,CSS
来源： https://www.cnblogs.com/amboke/p/16663841.html