标签: tailwind-css

我react-ts使用创建了一个新应用程序yarn create @vitejs/app my-app --template react-ts。

我使用安装了顺风yarn add --dev tailwindcss@latest postcss@latest autoprefixer@latest。

我初始化了顺风：npx tailwindcss init -p。

我设置from并to在postcss.config.js：

module.exports = {
  from: 'src/styles/App.css',
  to: 'src/styles/output.css',
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

我App.css在以下位置创建了一个文件src/styles：

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

根据https://vitejs.dev/guide/features.html#postcsspostcss-load-config ，允许任何有效的语法。from并且to 似乎是被允许的。

当我调用yarn devwhich本质上运行时vite，我的应用程序正在启动，没有构建错误，但未生成顺风输出。

我究竟做错了什么？

我有一个内联块，它的高度至少应为 1 rem，但如果内容不适合，它会扩展。如果没有 Tailwind，我会通过以下方式解决它。

<div style="display:inline-block; min-height:1rem;">
    content...
</div>

然而，Tailwind 提供的唯一 min-h 类是min-h-0、min-h-full和min-h-screen。那么我应该在这里添加哪个类来以“Tailwind 方式”编写它？

<div class="inline-block ???">
    content...
</div>

目前正在使用 ViteJs 构建 React 项目，该项目使用 TailwindCSS 和 PostCSS。

我希望在生产版本中混淆顺风类名。喜欢。object-cover​ a2另外，我的目标不是缩小。

我尝试寻找解决方案，但没有运气。

这是 postcss 配置：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

我想使用名为 poppins 的 Google 字体，这是该字体的 url https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap。有谁知道要这样做吗？

所以，我正在构建一个基本布局为

• 导航栏
• 内容
• 页脚

示例图片，取自：Tailwindcss：底部固定/粘性页脚

我的 App.vue 组件

  <div class="justify-center h-screen relative">
    <TheNavbar class="top-0"/>
    <div class="h-screen mb-auto">
      <router-view class="mb-auto" :key="$route.fullPath"/>
    </div>
    <Toast v-if="showToast" :message="showToast"/>
    <Footer class="relative" :footer_links="footer_links"/>  
  </div>

我希望页脚始终位于页面底部。当内容不够时，将Footer推到页面底部！

在我的内容上使用h-screen会将页脚推到底部。然而，在我需要滚动的页面上，页脚不会被向下推，而是会干扰内容。看图片...

当我摆脱班级时，问题就逆转了h-screen。现在，如果没有足够的内容，页脚就会爬到内容处，在其下方留下空白区域。

如何使页脚始终位于页面底部？

附录：

使用：

<Footer class="fixed inset-x-0 bottom-0"/>  

使页脚停留在页面底部。但是，现在当我滚动时，内容的底部被页脚剪切。

我试图避免在我的<a>标签下有下划线。我已经按照文档添加了该类"no-underline"，但我的链接下仍然有下划线？我添加了下面使用的代码：

<div
  class="
    my-3
    flex flex-wrap
    -m-1
    text-center
    justify-center
    items-center
    no-underline
  "
>
  <div class="m-auto">
    {% for tag in tags %}
    <a
      href="{% routablepageurl blog_page 'post_by_tag' tag.slug %}"
      class="no-underline"
    >
      <span
        class="
          font-mono
          m-1
          bg-gray-200
          hover:bg-gray-300
          rounded-full
          px-2
          py-1
          font-bold
          text-sm
          leading-loose
          cursor-pointer
          shadow-lg
          no-underline
        "
        >{{ tag }}</span
      >
    </a>
    {% empty %} No tags yet {% endfor %}
  </div>
</div>

Thanks for the help!

我在我的项目中使用 TailwindCSS，我想设置默认边框颜色，对于正常主题，我通过以下方式执行此操作：

module.exports = {
  mode: "jit",
  purge: ["{pages,app}/**/*.{jsx,tsx}", "node_modules/react-toastify/**"],
  darkMode: "media",
  theme: {
    extend: {
      borderColor: (theme) => ({
        DEFAULT: theme("colors.gray.100"), // Light theme default border color
        dark: {
          DEFAULT: theme("colors.gray.800"), // Dark theme default border color NOT WORKING
        },
      }),
  // ...
}

对于浅色主题，它工作正常，但是，对于深色主题，我似乎找不到应用默认值的方法，关于如何使其工作有什么想法吗？

多谢！

似乎每次启动 VScode 时 Tailwind CSS IntelliSense 都不起作用，重新安装后它就可以工作，另一方面，当它工作时，Tailwind CSS IntelliSense 不会提示，除非我按空格键。如果我将一门课移至另一门课，除非我按空格键，否则不会建议

我正在使用 Tailwind CSS IntelliSense v0.7.4 ，VScode 1.63.2 ，Ubuntu 21.10

包.json

{
  "name": "svelte-ts-tailwind-app",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public",
    "check": "svelte-check --tsconfig ./tsconfig.json"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^21.0.0",
    "@rollup/plugin-node-resolve": "^13.0.0",
    "@rollup/plugin-typescript": "^8.3.0",
    "@tsconfig/svelte": "^2.0.1",
    "autoprefixer": "^10.4.0",
    "postcss": "^8.4.4",
    "postcss-load-config": "^3.1.0",
    "rollup": "^2.60.2",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.1.0",
    "rollup-plugin-terser": "^7.0.2",
    "svelte": "^3.44.2",
    "svelte-check": "^2.2.10",
    "svelte-preprocess": "^4.9.4",
    "tailwindcss": "~3.0.0",
    "tslib": "^2.3.1", …

*以下问题与我之前提出的问题相关，因此如果我重复，请提前道歉，但我仍然无法解决我的问题。

我正在尝试让 Storybook 与 Tailwind CSS 一起使用，但到目前为止没有成功。这些是我遵循的步骤：

\n
1. 我从头开始创建了一个新的 TypeScript 项目，使用 Create Next App 进行引导\nit。我按照Tailwinds 网站上的说明进行操作。Tailwind 在应用程序上运行良好。
\n
2. 我按照他们网站上的说明设置了 Storybook 。Storybook 在端口 6006 上启动正常。
\n
3. 我相应地配置了 main.js 文件，以合并 PostCSS，以便 Tailwind 在 Storybook 中工作：
\n

module.exports = {\n  "stories": [\n    "../stories/**/*.stories.mdx",\n    "../stories/**/*.stories.@(js|jsx|ts|tsx)"\n  ],\n  "addons": [\n    "@storybook/addon-links",\n    "@storybook/addon-essentials",\n    "@storybook/addon-postcss"\n  ],\n  "framework": "@storybook/react"\n}\n

尽管做了所有这些，我没有看到 Tailwind 对应用程序中的故事组件\xe2\x80\x94 产生任何影响。

我尝试通过在 Storybook 组件中放入一个小元素来测试 Tailwind 是否有效。我没有看到它按预期呈现：

<h1 className="text-3xl font-bold underline">\n    Tailwind Works!\n</h1>\n

链接到 Github 存储库： …

祝您度过美好的一天，

我目前正在尝试将一些颜色应用于简单的滑块范围。

<Input class="range pr-6 bg-red-500" 
                    type="range" 
                    value="0" min="0" 
                    max="1000" 
                    onChange="rangeSlide(this.value)" 
                    onmousemove="rangeSlide(this.value)"></Input>

像这样改变颜色根本不起作用，我也尝试过文本和边框类。

我做了一些研究并假设我应该使用它来更改滑块：-webkit-slider-thumb

像这样 ：

.range::-webkit-slider-thumb {
  background: #00fd0a;
}

但是我希望只使用顺风而不应用纯CSS样式。如果有人能给我任何见解，我将非常感激。