标签: tailwind-css

通过将鼠标悬停在文本 ::after 伪类内容将可见，但仅通过查看或测试，我不会通过这种方法在 tailwind-css 中使用 .map 内的 react-js 在浏览器中打印该文本内容()

const data = [
    "Web Design",
    "Development",
    "Illustration",
    "Product Design",
    "Social Media",
];

<ul className='flex flex-col gap-5 text-[85px]'>
{
  data.map(item =>
    <li
      key={item}
      className={`cursor-pointer relative
      after:content-['${item}']  <----- this approach is not working...! Why?
      after:absolute
      after:right-0
      after:text-red-200 `}
    >

      {item}

    </li>
  )
}
</ul>

虽然我也尝试这种方法......

after:content-[${item}]

我试图仅从一侧、顺风的右侧制作阴影。如果我使用shadow-xl它，它会向所有侧面添加阴影。

如何更改 React Tailwind Datepicker 的颜色主题

<Datepicker
  asSingle={true}
  containerClassName="relative mt-8 bg-gray-100"
  displayFormat={"DD/MM/YYYY"}
  // maxDate={new Date()}
  minDate={new Date()}
  primaryColor={"green"}
  // startFrom={minDate()}
  useRange={false}
  value={value}
  onChange={handleValueChange}
/>;

Npm 包： npm i react-tailwindcss-datepicker

我想获得浅色主题，但也无法通过控制台获得CSS。链接到页面：https://react-tailwindcss-datepicker.vercel.app/theming-options 没有用于将默认深色主题更改为浅色的代码片段。

我尝试使用 tailwindcss 和 primeng 创建一个项目。但是导入Tailwind后，Primeng的样式不再适用

我尝试使用 Tailwind 前缀选项，但是一旦导入 Tailwind，Primeng 的样式就不再应用。为了排除其他原因，我创建了一个新的 Angular 项目（Angular 版本 16）并仅安装了 Tailwindcss 和 Primeng。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./src/**/*.{html,ts}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
    prefix: "tw-",
}

angular.json

{
    "assets": [
    "src/favicon.ico",
    "src/assets"
],
"styles": [
    "src/styles.css"
],
"scripts": []
},

style.css

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

@import "primeng/resources/themes/lara-light-blue/theme.css";
@import "primeng/resources/primeng.css";

在应用程序组件中，我有一些测试 div（Primeng 按钮和输入 - Tailwind 容器，具有某些样式）

当我从 primeng 组件中删除 tailwindcss 导入（更准确地说是 @tailwind/base）后，它的style.css样式就正确了。但顺风风格消失了

我正在尝试学习和使用新的实用程序框架，这些实用程序框架最近变得越来越流行。尾风CSS

当我按照文档中的说明编译CSS时，我看到很多CSS类名中都带有冒号:，并且前面加反斜杠\

这是为什么？这是为了使CSS理解那里:存在而不是逃避它吗？

我正在使用vite 0.16.6并希望将 vuepress 站点迁移到使用 vite。

但是我不确定如何配置 vite 以使用 tailwindcss。

在我的 index.css

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

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

这是我在 package.json 中的脚本。我使用 create-react-app 创建了一个项目，并想引入 tailwind。

"build:css": "postcss src/theme/tailwind.css -o src/assets/styles.css",
"watch:css": "postcss -w src/theme/tailwind.css -o src/assets/styles.css",
"build": "npm run build:css && react-scripts build",
"start": "npm run watch:css && react-scripts start",

当我运行yarn start 时，应用程序未启动。看来是停在值班时间了。我怎样才能拥有顺风手表并启动应用程序？

我试图在 md 断点内的 height 属性上添加一些动画，但 tailwind 不会使用我的类

 <div className={`h-12 bg-blue flex w-full text-white fixed mt-1 md:bg-white ${scrolling ? 'md:animationNav md:h-16' : 'md:animationBasisNav md:h-20'} lg:bg-gray-500 `}>
<p>test</p>
</div>

我的无礼

.animationNav{
    -webkit-transition: height 1s ease-in-out;
    transition: height 1s ease-in-out;

    img{
        -webkit-transition: padding 1s ease-in-out;
        transition: padding 1s ease-in-out;
        padding: 0;
    }
}
.animationBasisNav{
    -webkit-transition: height 1s ease-in-out;
    transition: height 1s ease-in-out;
    img{
        -webkit-transition: padding 1s ease-in-out;
        transition: padding 1s ease-in-out;
        padding: 0.25rem
    }
}

我尝试将其添加到这样的 tailwindcss 实用程序中，但仍然无法工作

@layer utilities {
    .animationNav{
        -webkit-transition: …

我有以下 HTML：

<div>
<img src="">
<div><!-- centered form on top of the image --></div>
</div>

布局应该是这样的

我该如何使用 Tailwind 来做到这一点？解决方案必须具有响应能力。我不想使用背景图像 CSS 属性。我想改用<img>标签

对于我想要创建的网站，我想使用谷歌的“Work Sans”字体。我下载了“WorkSans-Black.ttf”文件，在“public”文件夹中创建了一个子文件夹“fonts”，并将文件放入其中。下面我为大家截图了文件夹结构。有人可以帮我吗，下一步是什么？