标签: tailwind-css

我有这个html：

<div class="section">
   <div class="header">header</div>
   <div class="content">
      <div>sub contents 1</div>              
      <div>sub contents 2</div>
   </div>
</div>

我想访问带有类“section”的div的直接子级，这将是带有类：“header”和“content”的div。

我知道使用 css 我们可以做到：div.section > div

但如何使用tailwindcss做到这一点？

我为侧栏导航制作了这种样式

我做了一个盒子，并使用变换将其隐藏在左侧，以获得弯曲的边框效果。

悬停时、活动等

• 边框按钮 -> bg-green-300
• text-green-300 用于图标和文本
• 半粗体字体仅适用于文本

<a href="/dashboard">
    <div class="flex flex-row space-x-8 w-72 text-lg pb-3 text-gray-200"> 
        
        <div class="h-8 w-8 rounded transform -translate-x-7 hover:bg-green-300"></div>

        <div class="flex flex-row items-center space-x-8 transform -translate-x-10 -translate-y-1">
            <i class="bi bi-columns-gap hover:text-green-300 transform translate-x-1"></i>
            <h2 class="hover:font-semibold hover:text-green-300 transform translate-y-1 text-base">Dashboard</h2>
        </div>
    </div>
</a>

我可以在主 div 中添加一些内容来同时激活每个子元素中的悬停效果吗？

现在，只有当我将鼠标悬停在每个单独的元素上时，它才起作用。

任何帮助深表感谢 ：）

我目前正在使用 TailwindCss 为我的下一个项目构建一个组件库，我在处理 Button 组件时遇到了一个小问题。

我传入一个类似于'primary'或 的道具'secondary'，它与我在中指定的颜色相匹配，tailwind.config.js然后我想使用Template literals如下方式将其分配给按钮组件：bg-${color}-500

<button
    className={`
    w-40 rounded-lg p-3 m-2 font-bold transition-all duration-100 border-2 active:scale-[0.98]
    bg-${color}-500 `}
    onClick={onClick}
    type="button"
    tabIndex={0}
  >
    {children}
</button>

类名在浏览器中显示得很好，它显示bg-primary-500在 DOM 中，但不显示在“应用的样式”选项卡中。

主题配置如下：

  theme: {
    extend: {
      colors: {
        primary: {
          500: '#B76B3F',
        },
        secondary: {
          500: '#344055',
        },
      },
    },
  },

但它不应用任何样式。如果我只是手动添加bg-primary-500它工作正常。

老实说，我只是想知道这是否是因为 JIT 编译器没有选择动态类名，或者我是否做错了什么（或者这不是使用 tailWind 的方式）。

欢迎任何帮助，提前致谢！

我安装了新的 tailwindcss 2.0 版，但出现以下错误。我试图卸载 postcss 和 tailwindcss 但它不起作用。需要帮忙。

Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
    at Processor.normalize (/Users/niklas/Desktop/Privat/Projekte/nifoschool-frontend/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:153:15)
    at new Processor (/Users/niklas/Desktop/Privat/Projekte/nifoschool-frontend/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:56:25)
    at postcss (/Users/niklas/Desktop/Privat/Projekte/nifoschool-frontend/node_modules/postcss-loader/node_modules/postcss/lib/postcss.js:55:10)
    at /Users/niklas/Desktop/Privat/Projekte/nifoschool-frontend/node_modules/postcss-loader/src/index.js:140:12

 @ ./node_modules/vue-style-loader??ref--6-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/util/SlideInfo.vue?vue&type=style&index=0&lang=css& 4:14-393 14:3-18:5 15:22-401
 @ ./src/components/util/SlideInfo.vue?vue&type=style&index=0&lang=css&
 @ ./src/components/util/SlideInfo.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Grades.vue?vue&type=script&lang=js&
 @ ./src/views/Grades.vue?vue&type=script&lang=js&
 @ ./src/views/Grades.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://172.20.12.3:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

这是我的 package.json

  "name": "nifo-school",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint", …

有什么建议如何解决这个警告吗？我检查了整个项目，没有在哪里使用过类似的东西

justify-conten: end或align-items: end等等。

仍然不知道为什么每次都会出现这个警告。

使用以下版本Angular 13

"postcss": "^8.3.11",
"tailwindcss": "^2.2.19",

编辑/更新：

事实证明这是我正在使用的软件包的问题。它不在我的代码中。

我的 tailwind.config.js 中有一些自定义颜色：

colors: {
  primary: {
    500: '#0E70ED',
    600: '#0552b3'
  }
}

我想在我的 CSS 文件中使用它们。有没有办法替换#0e70ed下面的primary-500？

.prose a.custom-link {
  color: #0e70ed;
}

我已经有了带有 bootstrap 的 CMS 应用程序，并将带有 tailwind css 的 React 应用程序嵌入到其中。两个 css 框架 util 类都存在冲突。

我!important通过顺风配置启用，然后出现以下问题，还尝试通过配置选择器策略作为重要：.tailwind-app，但仍然引导！重要规则覆盖。我需要增加特异性并添加 add !important 到 tailwind 类中，以便应用程序能够正常运行而不受影响。

我不想对顺风使用预固定样式，因为从我的组件库加载了一些组件，我不想在其中进行更改 https://github.com/tailwindlabs/tailwindcss/discussions/5080

我面临着

未捕获的类型错误：无法解构“React2.useContext(...)”的属性“basename”，因为它为空。

在Link代码的组件中：

import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';

import { styles } from '../styles';
import { navLinks } from '../constansts';
import { logo, menu, close } from '../assets';

const Navbar = () => {
  const [active, setActive] = useState('');
  return (
    <nav className={`${styles.paddingX} w-full flex items-center py-5 fixed top-0 z-20     bg-primary`}>
      <div className="w-full flex justify-between items-center max-w-7x1 max-auto">
        <Link
          to="/"
          className="flex items-center gap-2"
          onClick={() => {
            setActive('');
            window.scrollTo(0, 0); …

screen/HomeScreen.js：使用 process(css).then(cb) 来使用异步插件

这是我的 HomeScreen.js

import { View, Text } from 'react-native'
import React from 'react'

export default function HomeScreen() {
  return (
    <View>
      <Text className="text-red">HomeScreen</Text>
    </View>
  )
}

我正在尝试在 React Native 中使用 tailwindcss 和Nativewind。这是我正在关注的链接。

我正在尝试@apply在<style>Nuxt.js Vue 文件的标签中使用 Tailwindcss指令。一切正常，但我不断收到一些烦人的红色波浪线。拜托了，伙计们，我需要帮助...谢谢！

下面是一个截图和一个片段：

<style scoped>

.title {
  @apply text-orient font-light block text-5xl pt-2;
}

.message {
  @apply font-light pb-4 text-orient text-2xl text-blue-bayoux
}
</style>