为什么 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 类? 的相关文章

  • 从 S3 提供 Django 的静态文件和媒体文件

    我遇到了一个奇怪的问题 我不知道是什么原因造成的 这是我当前的配置 使用Heroku MEDIA URL media STATIC URL static STATICFILES DIRS os path join PROJECT DIR s
  • 如何强制外部 div 扩展到内部 div 的高度?

    我有 ajax 到的数据 div class content 我希望外部 div 扩展到内部 div 的高度 我不知道该怎么做 HTML div class outer div class inner div class content S
  • 如何从 bootstrap-markdown.js 调用 .getContent 和 .parseContent

    我是使用 Bootstrap 插件的新手 刚刚通过代码学院 http www codecademy com en skills make an interactive website 我真的很想用这个很棒的引导 Markdown 插件 ht
  • 如何向 CSS 形状添加偏移轮廓?

    我在创建带有斜角边缘的块时遇到了一些问题 此外我需要一个斜角的边框并稍微偏离主块 问题是这个块可以根据屏幕响应 不知道具体的方法 希望大家帮忙 这就是我现在所做的 box display flex padding 20px height 2
  • 如何在 Django QuerySet 中将 DateField() + TimeField() 转换为本地时间?

    我的模型为这些字段 date models DateField 开始时间 models TimeField 结束时间 models TimeField 我想用以下方式注释查询集start datetime and end datetime
  • Django 选择性转储数据

    是否可以有选择地过滤哪些记录Django的dumpdata管理命令输出 我有几个模型 每个模型都有数百万行 我只想转储一个模型中符合特定条件的记录 以及引用任何这些记录的所有外键链接记录 考虑这个用例 假设我有一个生产数据库 其中我的用户模
  • 删除圆形图像周围的边框

    我有一个圆形图像 png 文件 中间是透明的 我需要将图像内的背景设置为纯色 为此 我将背景设为纯色 然后将border radius 50 但这会产生一条丑陋的小白线 有没有办法摆脱这个问题 或者我必须在图像编辑器中手动为图像着色 div
  • Bootstrap 中的旋转字形 / Font Awesome

    我试图让引导站点中的字形在悬停时旋转 除了更改颜色之外 这是我的尝试 http jsfiddle net young greedo17 88g5P http jsfiddle net young greedo17 88g5P 使用此代码 d
  • Internet Explorer 中的锯齿状按钮边缘

    如何去除 Internet Explorer 中宽按钮的锯齿状边缘 例如 您还可以通过设置来消除 Windows XP 的按钮样式 以及 Windows 的所有其他版本 background color and or border colo
  • 像在 tumblr 注册页面上那样鬼写

    有谁知道如何创建一个类似 tumblr 的字段 http www tumblr com http www tumblr com 这是一个 URL 字段 其中有一些褪色的文本 然后当您单击它并键入时 它会附加一些文本 tumblr com 您
  • 如何使用Python在Django for Windows中激活虚拟环境?

    我被告知要在 Django for Windows 中激活虚拟环境 我应该尝试 environment path Scripts activate 但是当我输入该命令时 cmd 返回此错误 该系统找不到指定的路径 我通过输入以下命令创建了虚
  • 如何让Gmail像加载进度条一样

    我想在页面的中心和顶部创建一个像 Gmail 一样的加载进度条 并适用于所有浏览器 这是基本代码
  • Django内联外键与父主键不匹配

    我需要一些帮助来解决使用内联表单的 django 错误 我似乎无法弄清楚这一点 如果我能在尝试验证之前弄清楚如何执行此操作 我可能可以强制插入 eventID 当我提交表单时 出现错误 Hidden field event The inli
  • 为什么此 TTF 字体在我的浏览器中无法使用?

    我下载了一种名为 Clunk 的 TTF 字体 并尝试将其应用于某些文本 这是我正在使用的代码 h1 Test h1 这似乎不起作用 Chrome 给了我两个错误 Failed to decode downloaded font path
  • 嵌套计算操作

    希望这很简单 我想使用CSS calc操作来执行两个计算 我想将宽度设置为等于 100 7 2 但是 如果我尝试在 CSS 计算操作中执行多个操作 则会失败 width calc 100 7 2 如何在一个 CSS 语句中执行多个计算操作
  • CSS 显示无不工作

    media screen and min width 900px and max width 1215px menu display none 这不起作用 div 仍然可见 但是 如果我将 div 更改为 div class menu 代替
  • 为不同的字体系列指定不同的字体大小

    有没有办法为不同的字体系列指定不同的字体大小 我想要使 用的字体 出于产品品牌目的 是一种有点罕见的字体 FlashDLig 并非所有 PC 和浏览器都支持 我的一台带有 IE 9 的 Windows 7 PC 不显示它 现在 对于我使用
  • 内嵌显示定义术语和描述

    我正在为页面上的某些元素使用定义列表 并需要它们内联显示 例如 它们normally看起来像 我需要它们看起来像 注意多个 DD 我可以让它们在 moz 中使用 float 来正常工作 但无论我尝试什么 它们都无法在 IE 中工作 我通常会
  • 如何使整个跨度落入新行?

    这个片段显示了我想要的 http jsfiddle net 945Df 3 http jsfiddle net 945Df 3 div class sup strong a href Rosario Santa Fe Argentina a
  • 仅第一个加载的 Django 站点有效

    我最近向 stackoverflow 提交了一个问题 标题为使用mod wsgi在apache上多次请求后Django无限加载 https stackoverflow com questions 71705909 django infini

随机推荐

  • 将 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 仅此而已 如果有人能想到为什么会发生这种情况或如何解决