为什么 tailwind 中只生成一些 css 类?

2023-12-28

我有一个项目,我使用 Django 作为 css 的后端和尾风。 tailwind 没有给我任何错误,并且在我的文件中查找类,但不生成 css。它唯一适用的类是 bg-blue-500,仅此而已。如果有人能想到为什么会发生这种情况或如何解决,我将非常感激。

html页面

{% load static %}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>{% block title %}Auctions{% endblock %}</title>
        <link rel="stylesheet" href="{% static 'auctions/output.min.css' %}">
    </head>
    <body>
        <h1>Auctions</h1>
        <div>
            {% if user.is_authenticated %}
                Signed in as <strong>{{ user.username }}</strong>.
            {% else %}
                Not signed in.
            {% endif %}
        </div>
        <ul class="nav">
            <li class="nav-item  bg-red-500">
                <a class="nav-link" href="{% url 'activeListings' %}">Active Listings</a>
            </li>
            {% if user.is_authenticated %}
                <li class="nav-item bg-blue-500">
                    <a class="nav-link" href="{% url 'logout' %}">Log Out</a>
                </li>
            {% else %}
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'login' %}">Log In</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'register' %}">Register</a>
                </li>
            {% endif %}
        </ul>
        <hr>
        {% block body %}
        {% endblock %}
    </body>
</html>

顺风.css

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

@layer base {
    h1 {
        @apply text-4xl;
    }
    h2 {
        @apply text-3xl;
    }
    h3 {
        @apply text-2xl;
    }
    h4 {
        @apply text-xl;
    }

}

包.json

        {
          "name": "jstools",
          "version": "1.0.0",
          "description": "",
          "main": "tailwind.config.js",
          "scripts": {
            "build": "tailwind build -i ../auctions/tailwind.css -o ../auctions/output.css && cleancss -o ../auctions/output.min.css ../auctions/output.css"
          },
          "keywords": [],
          "author": "",
          "license": "ISC",
          "dependencies": {
            "autoprefixer": "^10.4.12",
            "clean-css-cli": "^5.6.1",
            "tailwindcss": "^3.1.8"
          }
        }
    
  

顺风配置

/** @type {import('tailwindcss').Config} */
module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
},
content: {
    enabled: false, //true for production build
    content: ['../../templates/auctions/*.html', '../../templates/**/*.html']
},
theme: {
    screens: {
        sm: '640px',
        md: '768px',
        lg: '1024px',
        xl: '1280px'
    },
    
    extend: {},
},
variants: {},
plugins: [],
}

因为 tailwindcss 中没有 nav-item nav-link 或 nav 你可以看看tailwindcss 文档 https://tailwindcss.com/docs/installation了解您可以使用的可用 CSS 类。

您还可以通过将其添加到 tailwind 配置文件或直接添加到 css 文件来注册自己的组件

@layer components {
    .nav-item {
        @apply 'tailwind css classes'
    }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

为什么 tailwind 中只生成一些 css 类? 的相关文章

  • 如何使用javascript确保元素仅在圆上朝一个方向移动?

    好吧 我承认我对三角学真的很糟糕 出于上下文的考虑 我将添加我在这里提到的问题中的内容 参考问题 https stackoverflow com a 39429290 168492 https stackoverflow com a 394
  • 导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用

    我在尝试使用以下命令创建响应式菜单或下拉按钮时遇到问题Bootstrap 5一切似乎都正常 导航图标和下拉图标出现 但它不起作用 当我单击nav图标或dropdown按钮 无dropdown menu apears 我想特别提到的是 我还包
  • javascript 选择自定义光标 (svg)

    我正在动态地将光标更改为悬停时的本地 svg element on mouseover function this css cursor url svgs pointer svg 9 30 auto 工作正常 但我想选择该 svg 来操纵其
  • 合并 2 个大型 CSS 文件的有效方法

    我正在寻找一个可以合并 2 个大型 CSS 文件的工具 到目前为止我尝试过的所有方法 例如CSSMerge 都没有成功 其中一些只是随机删除属性 其他人则因 webkit 和 moz 等非标准属性而窒息 并给我错误 我还需要保留每条规则大小
  • ExpectedFailure 被计为错误而不是通过

    我在用着expectedFailure因为有一个我想记录的错误 我现在无法修复 但想将来再回来解决 我的理解expectedFailure是它会将测试计为通过 但在摘要中表示预期失败的数量为 x 类似于它如何处理跳过的 tets 但是 当我
  • 使用 CSS 的响应式图像

    我发现调整图像大小以使其具有响应能力很棘手 我正在开发一个 php 应用程序来自动将网站转换为响应式版本 我有点被图像困住了 我已经成功地为网站上的每个图像添加了一个包装类 并且可以很好地调整图像的大小 我的问题在于自然小于窗口的图像 例如
  • 使用javascript动态更新css内容

    需要将 css 更新为动态值 我不确定最好的方法是什么 div style zoom 1 div 缩放级别将根据窗口大小调整触发 应用程序将相应缩放 我将此应用程序加载到 cordova 中并让它在 iPAD 中运行 然后我意识到需要使用
  • IE 11 中的 CSS Display Flex 无法正常工作,图像会溢出

    我正在使用 CSSdisplay flex 以某种方式显示它们 在 Chrome 中 它看起来很完美 很漂亮 但在 IE 中 图像超出了我放置它们的元素 https jsfiddle net m42k7Lk5 8 https jsfiddl
  • React 设置背景颜色与状态 rgb

    所以我根据数据库的结果生成一个表 在数据库中我保留 rgb 值 例如 75 75 75 现在当我生成列表时 我想使用保存的值设置我的 td 的背景 tbody this state boxes map box i gt tr td box
  • 指南针字体输出错误的字体文件路径

    font face font family HelveticaNeueLTStd Lt src url css fonts HelveticaNeueLTStd Lt otf format opentype 这是我的指南针代码的输出 inc
  • 当共享相同的行和列时,将网格项设置为不重叠

    现在 当两个网格项共享相同的行和列时 它们会相互重叠 div class some grid container div Item 1 div div Item 2 div div 我如何让它们不重叠 当共享相同的行和列时 其行为可能类似于
  • 使 django 服务器可以在 LAN 中访问

    我已经安装了Django服务器 可以如下访问 http localhost 8000 get sms http 127 0 0 1 8000 get sms 假设我的IP是x x x x 当我这样做时 从同一网络下的另一台电脑 my ip
  • 在表格上使用上下文样式将点边框应用于特定单元格

    我以前有过问了一个问题 https stackoverflow com questions 6326266 issue with applying dotted border to cells in table design在这个问题上 你
  • 悬停此元素时隐藏元素后的伪元素

    我的菜单垂直放置在页面左侧和菜单之间 li 我有一个 after那是一个分隔符 我想要的是当我悬停元素本身 如果它是第一个元素 时隐藏 after 元素 或者当它是中间元素时隐藏上面和底部的元素 如果它是最后一个子元素 则隐藏 after前
  • 如何选择具有“A”类但不具有“B”类的 div?

    我有一些 div div class A Target div div class A B NotMyTarget div div class A C NotMyTarget div div class A D NotMyTarget di
  • Firefox 不会在使用 jQuery AJAX 加载的内容上呈现 CSS 样式

    我有一个网站 允许用户对书籍和文章发表评论 主表单有一个搜索输入 用于查找相关书籍或文章 来源 我使用 jQuery 根据输入的搜索词从外部站点动态加载新源 然后还使用 AJAX 返回列表中的源 我有两个问题 现在 在用户输入四个字符后 j
  • 使用 CSS 或 Javascript 填充动画

    我只是想知道是否可以使用 CSS 或 javascript 创建填充动画 基本上我想创建一个填充动画 如下图所示 http i40 tinypic com eit6ia png http i40 tinypic com eit6ia png
  • 图像背景不透明度不影响边框

    如何设置背景不透明度而不影响边框线不透明度 我找到的解决方案没有帮助 div class selected img src assets img image product 1 thumbnail jpg alt product 1 thu
  • CSS3 信封形状

    正如您可能已经猜到的 该图像是邮件信封形状的一部分 如果可能的话 我想使用 CSS3 创建该形状 我已经制作了其他部分 但这个很棘手 该形状需要两侧都有三角形切口和圆角 大概是 border radius bottom left borde
  • 使用css bootstrap时如何仅向一列添加右边框?

    我正在尝试使用CSS引导框架 http getbootstrap com css tables在我的项目中 我正在使用带有以下类的表table table bordered table striped 我想删除除第一列之外的所有列的边框 这

随机推荐

  • 将 App 与 Epub 格式关联

    我无法让我的应用程序在移动设备上注册 epub 文件 我的 android 清单中有一组意图过滤器 但它仍然无法使用 sd 卡上的 epub 文件打开 当我经过File Explorer应用程序 它显示该文件 但是当我单击它时 它显示 系统
  • RxJS 新手,范围不是函数

    我正在尝试创建一个简单的 TypeScript 文件来使用 RxJS 这是我所做的 npm 安装 rxjs 引用 跟踪器和系统js 在我的 索引 html 并创建了一个 test ts 文件如下 import Observable from
  • C 字符串比较与哈希比较

    我需要将一个字符串与 c 中的多个其他常量字符串进行比较 我很好奇哪个更快 对我要比较的字符串进行散列并将其与所有其他常量字符串散列进行比较 或者只是将字符串作为字符串进行比较 先感谢您 谢谢你的回答 我会做很多比较 谁能给我一个好的 快速
  • 价值迟到? “下面的值是刚刚评估的”

    let currComp this let projects let dataArr async function getData let getProject await axios get url auth username usern
  • 在ios中对简单字符串进行QRCode编码

    我已经从下载了示例代码github https github com myang git QR Code Encoder for Objective C用于 QRCode 编码 它工作正常 并为我指定的字符串生成带有 QRCode 的图像
  • 生成圆内的随机点(均匀)

    我需要在半径圆内生成均匀随机点R 我意识到 只需在区间 0 2 中选择均匀随机的角度 并在区间 0 2 中选择均匀随机的半径即可 R 我最终会得到更多朝向中心的点 因为对于两个给定的半径 较小半径中的点将比较大半径中的点彼此更接近 I fo
  • send_file 结束后清理 /tmp

    我有一个Redmine插件 我在 tmp 中创建一个临时文件 然后使用 File open 发送它 我想在用户下载临时文件后删除它 我能怎么做 我的代码 在控制器中 File open filelocation r do file send
  • 如何知道 scikit-learn 混淆矩阵标签顺序并更改它

    存在 27 个类别的多分类问题 y predict 0 0 0 20 26 21 21 26 y true 1 10 10 20 26 21 18 26 名为 answer vocabulary 的列表存储了每个索引对应的 27 个单词 a
  • 在php中将DateInterval对象转换为秒

    datetime1 date create 2009 10 11 datetime2 date create 2009 10 13 interval date diff datetime1 datetime2 我如何转换上面的内容 inte
  • 创建 JSON 时,vividsolutions JTS 中的几何图形失败

    朋友们 我在应用程序中使用vividsolutions 的库JTS 1 13 来处理点和多边形 但是当我尝试将几何对象转换为JSON 时 我的应用程序失败了 这是我的来源 RequestMapping value test point me
  • 在 django 1.10 中将 trigram 与排名搜索相结合

    我们在 django 1 10 中进行搜索 我们需要使用三元组搜索进行用户排名搜索 我们的代码是这样的 def get queryset self search self request GET get text vector Search
  • django中的模板如何获取用户对象?

    模板如何获取用户对象 换句话说 渲染过程中究竟是什么过程将用户对象传递给模板 模板中还可以访问哪些内容 使用django contrib auth context processors auth https docs djangoproje
  • iOS 14 中的锁定屏幕方向

    我正在更新旧的 iPad 应用程序 但我无法阻止 iOS 旋转只能以纵向模式查看的控制器 该应用程序有一个UISplitViewController 但在某一时刻 我需要以纵向模式全屏显示另一个控制器 无论 iPad 之前是纵向还是横向 我
  • 从 python 脚本创建可执行文件

    我使用 python 和 wxpython 创建了一个 GUI 程序 现在可以将其转换为可执行文件 在过去的两天里 我按照 py2exe 的各种说明进行了尝试 命令提示符的所有说明均参考旧版本的 Windows 而我使用的是 Windows
  • 在 Bash 中将文本文件作为命令运行

    如果我有一个文本文件 每行都有一个单独的命令 我如何使终端将每一行作为命令运行 我只是不想一次复制并粘贴一行 它不一定是文本文件 它可以是任何类型的有效文件 example txt sudo command 1 sudo command 2
  • 并行视觉工作室解决方案构建

    我知道 msbuild 能够使用多个核心 see here http www hanselman com blog HackParallelMSBuildsFromWithinTheVisualStudioIDE aspx 但是 VS201
  • Typescript:将相似对象的联合转换为对象类型

    如何使用 TypeScript 类型将相似对象的联合转换为对象类型 Input type I key foo value Foo key bar value Bar Output type O foo Foo bar Bar 我不确定这是否
  • 应用程序传输安全策略要求使用安全连接

    我添加了NsAppTransportSecurity作为字典并添加了键NsAllowArbitaryLoads正如每个人所说 但它对我不起作用 我对项目进行了彻底的重建 但仍然出现同样的错误 应该这样做 NSAppTransportSecu
  • 如何将一个 amp-story-page 链接到另一个页面?

    所以 我目前正在使用 AMP amp story 来制作故事 我想知道如何放置一个从一个页面切换到另一页面的按钮 例如 使您从第 5 页转到第 8 页 而不是第 6 页 的按钮 目的是允许用户跳过一些内容 amp story 是否也允许隐藏
  • 为什么 tailwind 中只生成一些 css 类?

    我有一个项目 我使用 Django 作为 css 的后端和尾风 tailwind 没有给我任何错误 并且在我的文件中查找类 但不生成 css 它唯一适用的类是 bg blue 500 仅此而已 如果有人能想到为什么会发生这种情况或如何解决