标签: tailwind-3

有没有办法使用 Tailwind CSS 调整 HTML 组件背景图像样式的线性渐变角度？

我唯一能做的就是在方向选项之间进行选择：t(top)、tr(top-right)等，但我想将具有 Tailwind 类的 hr 元素的渐变角度设置为 24 度.bg-gradient-[160deg]（以及颜色：.from-lime .to-red）

我有一个基于 tailwind css 的表的代码如下。

如果我删除该类block，该表将不再可滚动。

添加block类来tbody打破thead. 请参阅所附图片。

如果您想玩代码，请使用 CodePen。https://codepen.io/hirani89/pen/wvyJKqO?editors=1010

<div class="address">
  <h1 class="font-medium leading-tight text-3xl mt-0 mb-2">Recipient</h1>
  <div class="item mb-2 md:flex md:flex-wrap md:justify-between">
    <div wire:id="rbWM5jbW8w1GcT2ql3DF" class="container w-full px-4 sm:px-8">
      <div class="my-2 flex sm:flex-row flex-col">
        <div class="block w-1/3 relative">
          <span class="h-full absolute inset-y-0 left-0 flex items-center pl-2">
            <svg viewBox="0 0 24 24" class="h-4 w-4 fill-current text-gray-500">
              <path d="M10 4a6 6 0 100 12 6 6 0 000-12zm-8 6a8 8 0 1114.32 4.906l5.387 …

我已经为我的 React 应用程序安装了 React-Bootstrap 和 Tailwind。我在使用它们时遇到了一些冲突。所以我想卸载顺风。

我使用 Angular 15 和 Angular Material 15，然后按照说明添加了 Tailwind CSS https://tailwindcss.com/docs/guides/angular

材料组件设计不匹配，如下所示

占位符名称被按应有的方式截断

该行出现在文本框中。

在 style.scss 中

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

顺风配置

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

Tailwindcss 文档（v3）讨论得inset box shadow非常简短，以至于我找不到将自定义插入框阴影应用到元素的方法。也shadow-inner-[0px_-2px_4px_rgba(0,0,0,0.6)]不起作用。只有默认值shadow-inner适用于该元素。有没有办法将自定义阴影内部应用到元素？或者如何在tailwind.config.js文件中定义自定义文件？

我已经检查了 Stack Overflow 上的许多答案，但无法解决 IntelliSense 不适用于 Tailwindcss 的问题。但 vscode Intellisense 适用于其他事物，例如 python 和 javascript。请任何人帮助我为什么这不起作用。我正在使用 Tailwindcss CLI。甚至 CSS 文件 Intellisense 也不起作用。

我的配置文件是。tailwind.config.js

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

我也将这个设置添加到.vscode/settings.json

{
"css.validate": false,
"liveServer.settings.port": 5501,
"tailwindCSS.emmetCompletions": true,
"tailwindCSS.includeLanguages": {
  "plaintext": "html",
  "javascript":"javascript"  
},
"editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
},
"tailwindCSS.classAttributes": [
    "class",
    "className",
    "ngClass"
]}

曾经的一件事。CSS 编译成功，但 Intellisense 不起作用。这是我的项目文件夹结构。请任何人帮助我，拜托。

如何在顺风中添加roboto字体系列并将其用作标签元素？

<label class="font-roboto"></label>

这是我第一次安装和运行 tailwind CSS。我按照说明操作并相应地执行了所有操作，但随后它开始显示一些警告，如下所示

你能告诉我为什么我会收到这些警告以及无论如何我要解决它们吗？因为我担心我生成的 CSS 会丢失样式所以需要帮助来修复它

另外，我可以将 tailwind CSS 保持在监视模式吗？请给我命令行或视频或向我解释修复方法？先感谢您！

我有一个输入元素。它占用可用父宽度的 50%。财产w-6/12。

如何为移动设备设置全宽度？

代码是：

<div class="mt-4 width">
   <div class="mt-1 w-6/12 sm:w-full">
      <select
         type="email"
         autocomplete="email"
         class="block w-full bg-gray input-color-gray input-color-gray font-roboto-100 rounded-md sm:text-sm p-3 bg-gray pr-4"
         >
         <option>Make</option>
      </select>
   </div>
</div>

我努力了：

sm:w-full

如何在 Tailwind 中将小尺寸的内容或项目居中。我做了 Tailwind 中可用的所有对齐类，但它不起作用。这是顺风V3

<div class="bg-white pb-8">
  <div class="p-4 pb-0 bg-third-bg sm:max-w-7xl mx-auto">
    <div class="sm:flex sm:max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 sm:items-center sm:justify-between bg-white p-6">
      <div class="sm:flex sm:flex-col sm:items-center sm:justify-center sm:space-y-4 md:w-4/12">
        <div class="sm:flex">
          <img src="https://educlever.beplusthemes.com/university/wp-content/uploads/2018/11/forma4.png" alt="" />
        </div>
        <div class="sm:flex text-xl font-bold">Lorem ipsum dolor sit</div>
        <div class="sm:flex sm:text-center">Lorem ipsum dolor sit amet, conse ct amet, conse adipiscing elit dolor sit a amet, conse adipisci</div>
      </div>
      <div class="sm:flex sm:flex-col sm:items-center sm:justify-center sm:space-y-4 md:w-4/12">
        <div class="sm:flex">
          <img src="https://educlever.beplusthemes.com/university/wp-content/uploads/2018/11/forma3.png" alt="" />
        </div> …

tailwind css 类没有显示，我按照 tailwindcss.com create-react-app 的安装过程来安装它。交叉检查，我似乎找不到它仍然不起作用的原因。我确实按照与此问题相关的答案中的说明将反应脚本更新到版本 5.0.1，但它没有解决问题。

这是 package.json 文件

    {
  "name": "my-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.1.1",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "^5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version", …

以与黑暗模式相同的方式为 Tailwind 添加自己的主题的最佳方法是什么？

该类dark包含在 HTML 标记中，表示页面现在处于深色模式，并且我们dark:在定义类以在该模式下设置样式时使用选择器。

我的问题 - 我们如何向 HTML 标签添加额外的类，并在样式中使用额外的自定义选择器来设置该特定变体的样式？

我已经阅读了 Tailwind 官方网站上的一些插件和变体文档，但不太清楚这里的正确方法是什么。