我使用create-react-project命令创建了一个 ReactJS 项目。我 npm 安装了tailwindcss并创建了一个tailwind.config.js文件。

现在为了让我的生活更轻松，我还安装了一个名为 Tailwind CSS IntelliSense 的扩展并重新加载了 VSCode。该扩展程序仍然没有在我的 JavaScript 文件中提供建议。

起初，我认为这可能是因为它仅适用于 html 扩展，或者 reactjs 文件className用于添加 CSS 类，因为 class 关键字被保留。因此，我尝试编辑index.html文件，但也尝试编辑HTML 文件中的建议。

请告诉我还可以试用什么？

我在我的 Vuejs 应用程序中使用了顺风。我有这个简单的模板

<template>
  <div class="bg-gray-500 h-screen">
    <Header /><!-- //height 32 -->
    <div class="w-2/3 mx-auto p-4 text-lg bg-white h-full shadow-lg">
      <router-view />
    </div>
  </div>
</template>

divh-screen是根或我的应用程序。该组件<header>的顺风高度为h-32

问题是第二个 div 导致页面在底部滚动，即<header>(h-32)的高度。

我想做的事

如果没有内容，我希望第二个 div 填充屏幕的剩余高度，但仅此而已。如果有内容，我希望它根据需要增长。

我设法弄一本电子应用与运行的WebPack，Vuejs和tailwindcss，开始与电子的WebPack模板包并添加Vuejs和tailwindcss之后，但tailwindcss不起作用。

SO 上有一个等效的线程，但是那里提到的解决方案使用了electron-vue，它有 200 多个未解决的问题，并且似乎不再维护。

有人知道这里出了什么问题吗？我进行了如下操作：

1. 初始化 Electron webback 样板（根据这里）：

   git clone https://github.com/electron-userland/electron-webpack-quick-start.git project
   cd project
   rm -rf .git
   

   Run Code Online (Sandbox Code Playgroud)

2. 安装Vuejs：

   yarn add --dev vue css-loader vue-loader vue-template-compiler
   

   Run Code Online (Sandbox Code Playgroud)

3. 为 Vuejs 设置 webpack：

   const { VueLoaderPlugin } = require("vue-loader");
   
   module.exports = {
       module: {
           rules: [
               {
                   test: /\.vue$/,
                   use: 'vue-loader'
               }
           ],
           plugins: [
               new VueLoaderPlugin()
           ]
       }
   }
   

   Run Code Online (Sandbox Code Playgroud)

4. 通过修改src/renderer/index.js来测试Vuejs ：

   'use strict';
   import Vue …

   Run Code Online (Sandbox Code Playgroud)

我的<code></code>Vue.js 应用程序中有以下块，如下所示（使用 TailwindCSS 类）：

<code class="block whitespace-pre overflow-x-scroll">
   {{ dataset.bibTex }}
</code>

但是，在页面上，这看起来如下：

我想知道，我在格式化这个块时做错了什么？我需要用正则表达式替换任何东西吗？我试过修剪和正则表达式在开始和结束时替换字符，但似乎没有任何效果......

我正在使用带有 Tailwind 的 Vue 并想创建一个“NotFound”视图页面。此路由器视图上的内容应位于屏幕的中央。路由器视图上方是导航栏组件，因此在居中时我必须注意高度。

首先，我尝试使用h-screen路由器视图

<link href="https://unpkg.com/tailwindcss@1.8.12/dist/tailwind.min.css" rel="stylesheet"/>
<div>
  <div class="bg-yellow-400 py-8">
    my navbar
  </div>
  <div class="bg-green-400 flex justify-center items-center h-screen">
    this content is not centered on screen
  </div>
</div>

但是正如您所看到的，绿色容器中的内容不在屏幕中央。接下来我尝试与h-full

<link href="https://unpkg.com/tailwindcss@1.8.12/dist/tailwind.min.css" rel="stylesheet" />
<div class="h-screen">
  <div class="bg-yellow-400 py-8">
    my navbar
  </div>
  <div class="bg-green-400 flex justify-center items-center h-full">
    this content is not centered on screen
  </div>
</div>

但不幸的是，这仍然不能解决它。有人知道如何正确填充屏幕高度的其余部分，以便路由器视图的高度为100% - navbarComponentHeight？

我有一个模态（用 React 编写，但这并不重要）在里面，我想添加一个手风琴。我有手风琴很好地上下滑动，我的问题是模式的高度根据手风琴过渡立即上下跳跃。

有没有办法让模态高度在手风琴旁边的过渡中增长？谢谢

编辑：改写问题。

试图学习顺风，但是当我尝试构建 CSS 时，我不断收到错误消息。我已经关注了多个视频，每次遇到这个错误。

这是我不断收到的错误。$ npm 运行构建

> platfomr@1.0.0 build C:\Users\ghost\Dropbox\portfolio project\Discovery TV Platform
> tailwind build assest/styles.css -o public/styles.css

internal/modules/cjs/loader.js:463
  throw e;
  ^

Error: Package exports for 'C:\Users\ghost\node_modules\colorette' do not define a valid '.' target
    at resolveExportsTarget (internal/modules/cjs/loader.js:460:13)
    at resolveExports (internal/modules/cjs/loader.js:393:16)
    at Function.Module._findPath (internal/modules/cjs/loader.js:492:20)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:787:27)
    at Function.Module._load (internal/modules/cjs/loader.js:693:27)
    at Module.require (internal/modules/cjs/loader.js:864:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (C:\Users\ghost\node_modules\autoprefixer\lib\autoprefixer.js:3:17)      
    at Module._compile (internal/modules/cjs/loader.js:971:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1011:10) {
  code: 'MODULE_NOT_FOUND'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! platfomr@1.0.0 …

我正在用tailwind作为css框架构建一个网站，但是我遇到了一个问题，当我尝试使用tailwind的媒体查询前缀（sm:、lg:等）时，会抛出这个错误：

@apply不能与使用.sm\:，因为.sm\:悬停，：：要么找不到，或者它的实际定义包括一个伪选择喜欢活跃等，如果您确信.sm\:存在，确保任何@import声明是正确处理之前顺风CSS看到您CSS，as@apply只能用于同一 CSS 树中的类。

有人可以解释如何将这些前缀与自己的自定义类一起使用吗？已经感谢您的帮助！<3

我创建了一个带有 jetstream 和惯性 vue 堆栈的 laravel 应用程序，因为我的新项目问题是Tailwindcs版本 2 postCss，它不支持@applyvue 组件内部的指令，但在.css文件内部它工作正常我不想要那个，因为那个 css 文件将加载我的每个页面我只想要带有@apply指令的短内联实用程序类，但我不能，我该如何实现。？

在我的 vue 模板中

<template>
 <div class="mt-4">
  <label for="hello">Hello</label>
  <input id="hello" class="input"/>
 </div>
</templete>

<style scoped>
    .input {
        @apply bg-gray-200 border h-10
    }
</style>

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
    ])
    .webpackConfig(require('./webpack.config'));

if (mix.inProduction()) {
    mix.version();
}

const path = require('path');

module.exports = {
    resolve: {
        alias: {
            '@': path.resolve('resources/js'),
        }, …

如何使用 Tailwind CSS 在图像悬停时显示文本：在图像悬停时显示文本？

这是我的头像？我希望在用户悬停图像时显示文本“哺乳动物”？

<img src="/img/cat/categories/mammals.png" alt="mammals" class="max-w-full max-h-full">