如何使用 Tailwind CSS 在底部创建固定/粘性页脚？

在本文中，我们将使用 Tailwind CSS 在底部创建一个固定/粘性页脚。 Tailwind CSS是一个高度可定制、实用优先的 CSS 框架，我们可以从中使用实用类来构建任何设计。使用 Tailwind CSS，我们可以通过简单地添加类来创建设计。

安装：

方法一：通过 npm 安装 Tailwind

• 步骤1：

  npm init -y

• 第2步：

  npm install tailwindcss

• 第 3 步：现在我们必须使用 @tailwind 指令将 Tailwind 的基础、组件和实用程序样式注入到我们的 CSS 文件中，从而将 Tailwind 添加到我们的 CSS 中。

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

• 第 4 步：这是一个可选步骤，用于创建 Tailwind 配置文件。

  npx tailwindcss init 

• 第 5 步：

  npx tailwindcss build styles.css -o output.css  

方法二：通过 CDN 使用 Tailwind

示例：在以下示例中，使用了以下类。

类bg-{color}用于元素的背景颜色。同样， p-{size}用于元素的填充， text-{size} 用于文本的字体大小， text-center用于 将文本居中对齐， text-{color}为文本字体颜色， border-b-{width}为底部边框，border-t为顶部边框， border-{color }是元素的边框颜色， fixed是元素的固定位置， inset-x-0是 元素的 right 和 left 属性， bottom-0为 底部属性。

HTML

  
    
    
  
  
    

        GeeksforGeeks
    
    

      Sticky footer using Tailwind CSS
    
    

      

            
      
    
    

      This is sticky fixed Footer.
    
  

输出：