Next.JS中的TailwindCSS在Webkit中无法正确呈现
Next.js是一个流行的React框架，而Tailwind CSS是一种基于类的CSS框架。在Next.js中使用Tailwind CSS时，有时可能遇到在Webkit浏览器中无法正确呈现的问题。这个问题通常是由于一些CSS属性在Webkit中的兼容性问题引起的。
为了解决这个问题，可以尝试以下解决方法：
- 检查版本：确保你正在使用的Next.js和Tailwind CSS版本是最新的，因为新的版本通常会修复一些兼容性问题。
- 更新浏览器：如果问题发生在特定的Webkit浏览器中，尝试更新该浏览器的版本，以确保使用的是最新的浏览器引擎。
- 自定义配置：在使用Next.js和Tailwind CSS时，可以尝试自定义一些配置项来解决兼容性问题。例如，可以通过配置
postcss.config.js文件来调整CSS编译过程中的一些选项。 - 使用autoprefixer插件：Tailwind CSS依赖于autoprefixer插件来自动添加浏览器前缀，以确保在不同浏览器中的兼容性。确保你已经正确配置了autoprefixer插件，并且它被正确地应用在你的Next.js项目中。
- 提交Bug报告：如果以上方法都无效，那么可能是Next.js或Tailwind CSS的一个已知问题。你可以在官方的GitHub仓库中提交一个Bug报告，描述你遇到的问题和复现步骤，以帮助开发团队解决这个问题。
总结起来，解决Next.js中Tailwind CSS在Webkit中无法正确呈现的问题，可以通过更新版本、更新浏览器、自定义配置、使用autoprefixer插件以及提交Bug报告来尝试解决。在实际应用中，可以结合腾讯云的云服务器、云存储、云安全等相关产品，来构建稳定、高效的Next.js应用。腾讯云相关产品和产品介绍链接地址可参考腾讯云官方网站。
相关·内容
我使用的是next.js和顺风。
我想隐藏滚动条。
我写了一个样式来隐藏style.css中的滚动条，但是它没有被应用。
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
body::-webkit-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
display: none;
}
浏览 4提问于2021-03-20得票数 0
我将tailwindcss与Remix.run结合使用，并试图找出如何根据从服务器获得的数据动态地更改tailwindcss中的一些主颜色。我已经看到了一些使用Next.js框架的例子，但在Remix.run中无法做到这一点。
浏览 12提问于2022-10-19得票数 0
1回答
我正在尝试使用"Daisyui“中的主题，这是一个基于顺风的css组件库。我有一个next.js应用程序，入口点是pages/_app.tsx。从例子和阅读网站的文档来看，主题似乎是从最高的组件传递到所有的内部组件。
将daisyui添加到tailwind.config.js文件中，如下所示：
我使我的tailwind.config.js文件看起来像这样：
/** @type {import('tailwindcss').Config} */
module.exports = {
//...
content: ['./pages/**/*.
浏览 8提问于2022-10-08得票数 2
回答已采纳
要复制该问题，您可以使用此示例并在开发环境中运行。 https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss 上述示例在开发环境中也具有非常高内存使用率，这对于下一个js应用程序来说并不常见。 我已经尝试了不同版本的tailwindcss和Next.js的组合，但问题仍然存在。PS:我正在使用Ubuntu 20.04 (如果这对我有任何帮助的话)。
浏览 65提问于2020-12-20得票数 2
2回答
如何配置next.js以支持同时顺风css和css模块？我想要tailwindcss包住整个项目：
// /tailwind.scss
:global {
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
}
// /test-module.css
.example {
font-size: 36px;
}
// /pages/_app.jsx
import '../talwind.
浏览 28提问于2019-10-27得票数 14
我是个新手，我想知道为什么我的自定义实用程序没有被应用。 // tailwindcss.config.js
const plugin = require("tailwindcss/plugin");
module.exports = {
purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
darkMode: false, // or 'media' or 'class'
theme: {
浏览 13提问于2021-04-03得票数 1
当我试图为下一个js应用程序运行npm时，我得到了上面提到的错误。next.js应用程序在打字稿中。下面是带有文件夹结构的错误屏幕截图。无法理解为什么这里将_app.tsx视为目录而不是文件。任何帮助都是非常感谢的。提前感谢！
编辑:它只是一个基本的next.js应用程序，默认情况下是用类型记录创建的，包含上面错误屏幕截图左侧显示的文件夹结构。
下面是_app.tsx内部的代码：
import 'tailwindcss/tailwind.css'
import React from 'react'
import { Layout } from '../c
浏览 8提问于2022-03-16得票数 0
当我运行这个命令npx create-next-app --typescript --example with-tailwindcss my_project时，我的项目最后看起来如下所示：
如何在没有Javascript文件的情况下安装带有类型记录和Tailwindcss的Next.js？
浏览 13提问于2022-09-08得票数 0
在我的Vue应用程序中，我试图找到一种在不同组件中重用image-rendering: -webkit-optimize-contrast的有效方法。我不想将其创建为<style scoped>，并在每个组件中声明它。
我能找到的唯一关于它的资源是来自Tailwind文档：。我尝试下载autoprefixer，并按需要插入插件：
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
]
}
我不知道如何将webkit包含在我
浏览 11提问于2022-06-09得票数 1
回答已采纳
我是第一次在Next.js项目中使用TailwindCSS。我遵循了他们的文档“如何在Nextjs中使用顺风”，并尝试在tailwind.config.js中添加颜色，但最终破坏了所有颜色。其他样式也适用。 我在Tailwind上看了一段YouTube视频，但那家伙在常规的HTML/CSS项目中使用它。他通过运行tailwindcss build styles/globals.css -o public/styles.css将文件输出到public/styles.css中，而我通过遵循文档在Next.js中使用styles/globals.css。 我的tailwind.config.js文
浏览 36提问于2021-08-08得票数 2
如文档中所述，我在使用npx编译TailwindCSS时遇到了一些问题。Webpack在做他的工作！开发服务器和build都正确地使用自定义类！问题是，当我通过npx tailwindcss build tail.css -o tailwind.full.css编译尾风时。自定义导入不包含在结果css文件中。因此，自动完成不完成我的定制css键.除了没有编译我的@导入的自定义css文件的npm tailwindcss build之外，一切正常工作。我怎么能拿到这个？
下面是npx顺风构建命令中通知我的tail.css文件：
@import "./colors.css";
@i
浏览 1提问于2020-07-27得票数 4
回答已采纳
我在我的Next.js应用程序中安装了终端机。这是我收到的错误消息
error - ./node_modules/next/dist/client/dev/amp-dev.js
Error: Cannot find module 'xwind/babel'
我是这样安装Next.js应用程序的：
npx create-next-app -e with-tailwindcss ./
这些是我安装的依赖项：
npm install graphql graphql-request html-react-parser moment react-multi-carousel sass
浏览 16提问于2022-09-15得票数 1
同样的事情发生在github的问题上。
在Next.js，Tailwindcss环境中没有工作的第一个/最后一个子空间。
# not working
mt-4 first:mt-0
我想知道解决办法。谢谢。
浏览 1提问于2020-12-27得票数 4
1回答
我已经使用next.js文档中提供的顺风启动器存储库创建了一个next.js应用程序，并且顺风工作得很好。然而，我最近遇到了一个问题，某些顺风类停止工作，特别是任何与颜色相关的类。 我已经再次尝试运行npm -i，但是没有发生任何变化。 postcss.config // If you want to use other PostCSS plugins, see the following:
// https://tailwindcss.com/docs/using-with-preprocessors
module.exports = {
plugins: {
tailwind
浏览 7提问于2021-06-27得票数 0
回答已采纳
2回答
在next.js项目中，我试图使用以下示例构建一个旋转木马：
我已经安装了tailwindcss@2.0.2，我还需要其他任何东西来使CSS工作吗？
浏览 7提问于2022-08-06得票数 1
回答已采纳
1回答
我已经安装了带有顺风CSS的next.js。我按照指令配置了所有的东西。所有密码都在下面。
_app.js
import '../styles/index.css';
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
tailwind.config.js
module.exports = {
content: [],
theme: {
extend: {},
},
plugins:
浏览 1提问于2021-12-31得票数 1
回答已采纳
我在我的next.js项目上安装了tailwind.config.js文件，但是找不到这个文件。下面是我用来安装的命令
npm install -D tailwindcss postcss autoprefixer
拜托，我需要帮助，伙计们
浏览 5提问于2022-08-24得票数 0
在Next.js环境中引入了尾风CSS。
我想应用color.lime，但是我得到了以下错误。
./node_modules/tailwindcss/tailwind.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-5-1!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ref--5-oneOf-5-2!./node_modules/tailwindcss/tailwind.css)
ReferenceError: color is not defined
tai
浏览 2提问于2020-12-29得票数 3
回答已采纳
1回答
在遵循TailwindCSS配置教程使用Next.js设置它时，顶层的.css文件如下所示：
@tailwind base;
@tailwind components;
@tailwind utilities;
我的问题是:这是做什么，它是如何抓取和利用顺风CSS文件？
浏览 7提问于2022-07-21得票数 0
1回答
我是Next.js和React框架的新手。我想问一问如何切换一个课程。
以下是我在普通JS中所做的工作：
function toggleNav() {
var element = document.getElementById("nav");
element.classList.toggle("hidden");
element.classList.toggle("flex")
element.classList.toggle("bg-slate-900")
var toggler = d
浏览 1提问于2022-05-20得票数 0
我有<MobileLayout />，<DesktopLayout />。我正在使用Next.js进行服务器端呈现。我注意到有很多著名的ui库在语义-UI-React中都有像<Respnosive />组件这样的移动检测组件。但是所有这些都是客户端方法，不能在SSR上正常工作。
我读了一些文件，结论是我应该检查服务器端的user-agent，req.headers。在Next.js中，什么是正确的方法来检测设备，并以适当的方式呈现MobileLayout / DesktopLayout中的一个
我试过什么
在_app.js中
import isMobile
浏览 3提问于2020-06-02得票数 5
我真的不知道Next.js上的这段代码有什么问题。index.js：
import { getUsers } from "../utils/users";
import React from "react";
Home.getInitialProps = async (ctx) => {
let elements = [];
getUsers().then((res) => {
res.map((el) => {
elements.push(el.name);
});
console.log(e
浏览 6提问于2021-07-21得票数 2
回答已采纳
这是我的依赖项，我已经安装了@tailwindcss/jit
我遵循了
但是，当我试图替换对象时
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
进入这个@tailwindcss/jit对象的postcss.config.js内部
// postcss.config.js
module.exports = {
plugins: {
'@tailwindcss/jit&
浏览 2提问于2021-03-19得票数 1
回答已采纳
我最近从Next.js和TailwindCSS开始，我想改变页面的背景。这可能是一件很简单的事，但我想不出该怎么做。不能将类添加到body标记中的Next.js中，对吗？我试图用一个Component包装_app.tsx中的div，但它也封装在一个不同的div中，所以背景色不是完全的高度。
我应该如何为我的应用程序设置背景色，是否也可以对单个页面取消它？
浏览 11提问于2022-02-13得票数 1
回答已采纳
2回答
我有一个正在构建的next.js站点，它使用下面的特定文本， const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ['SFMono-Regular', 'Menlo', ...defaultTheme.fontFamily.sans],
},
colors: {
// indigo: &#
浏览 47提问于2020-09-13得票数 3
回答已采纳
我正在Next.js + Firebase中开发web应用程序。问题是Firebase中的GRPC调用不正确，因此我们需要直接编辑node_modules。
如果我在node_modules中编辑GRPS，它可以工作，但这是不健全的。
你能帮我解决这个问题吗？
SyntaxError:请求的模块‘@grpc/grpc’应该是CommonJS类型，它不支持命名导出。可以通过导入默认导出来导入CommonJS模块。例如:从‘@grpc/grpc’导入pkg；const {凭据，loadPackageDefinition，元数据}= pkg；
package.json
...
"de
浏览 10提问于2021-12-05得票数 2
回答已采纳
我使用的是React (Next.js)和TailwindCSS。
<ul>
<li>
<h1 className="bg-red-400">first</h1>
</li>
<li>
<h1 className="bg-green-400">second</h1>
</li>
<li>
<h1 className="bg-green-400">third</h1&g
浏览 2提问于2022-02-17得票数 2
我一直在使用Next.js与尾翼，并喜欢这个组合。我已经制作了一个web应用程序，并且还想让ios成为android版本。是否有办法将我现有的Next.js项目转换成移动应用程序，或者我是否必须从头开始并制作一个？Tailwindcss并不像在React.js或Next.js上那样好于，所以如果是这样的话，对于Reactive原住民来说，有什么好的替代方法呢？我最终想要编码一件东西，并将其作为一个网页、ios和android版本。如果我想要做到这一点，这是否意味着我应该使用独占反应本机前进？
浏览 4提问于2022-06-20得票数 0
我刚开始使用无头cms，想知道如何将内容呈现为新页面？我正在用Next.js和comfortable.io构建网站，但我不明白如何在comfortable中创建一个新页面，并将其传递给next.js项目以生成页面。有人能为我指出正确的方向吗?我需要学习什么才能理解这一点？
浏览 9提问于2019-08-08得票数 1
回答已采纳
在创建下一个js顺风应用程序时，我得到一个带有类型记录文件的项目，该文件是新的，如何防止此错误发生？
我使用这些命令来创建一个js项目，我已经做了很多次了，我使用这些命令创建了一个带有顺风css的next.js应用程序，并且使用js而不是类型记录。
npx创建下一个应用程序
或
npx创建下一个应用程序-e，并附带-tailwindcss(然后是项目名称)
有没有人知道为什么我一直在创建一个打字稿项目？如何返回到在next.js?中创建没有类型记录的js项目？
浏览 11提问于2022-01-06得票数 1
单击框架预置并部署到vercel后，我得到以下错误：
在您的项目中无法检测到Next.js版本。确保"next"安装在“依赖项”或"devDependencies“中
即使我有下一个依赖项，如下所示：
{
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start&
浏览 2提问于2022-10-14得票数 1
我是这个框架的新手，在通过互动学习之后，我有一些关于Next.js如何处理SEO问题的问题。
Next.js粗体功能是它在服务器端呈现React组件的能力，然而，据我所知，它只在服务器端呈现 first 请求，而其他请求将在客户端呈现，那么它如何在第一个假设为SEO friendly?Based、像google这样的爬虫器访问我们的站点、然后作为完整的HTML页面返回第一个响应，但是对于接收到的页面内的其他连续链接，它如何做得更好呢？它应该使用Javascript(这是SEO的主要致命弱点)执行客户端呈现，因此，除了第一个请求之外，CRA和Next.js没有什么区别，对吗？，如果前面的假设是正
浏览 3提问于2020-02-09得票数 3
回答已采纳
大家好，StackOverflow社区，我是Next.js 13开发的新手，我刚刚用TypeScript和TailwindCSS完成了我的Next.js 13应用程序。在本地，它工作得很好，但是当尝试部署到Vercel时，在选定的Next.js部署预置下，Vercel在使用Error: No Next.js version could be detected in your project. Make sure `"next"` is installed in "dependencies" or "devDependencies"的6s之后就陷入
浏览 11提问于2022-11-21得票数 1
回答已采纳
1回答
我刚刚发现，由于我用Next.js构建了我的应用程序，我无法使用CRA的文件夹结构框架来构建或诊断我的应用程序。
不幸的是，我现在完全不知道Next.js应用程序应该如何正确地扩展移动设备的网站。我一直有这样的印象，那是index.html的工作(这是我写的，但我的应用程序似乎无法找到或使用它)。我查看了Next.js应用程序的默认文件夹结构：
├── README.md
├── components
│ ├── head.js
│ └── nav.js
├── next.config.js
├── node_modules
│ ├── [...]
├──
浏览 1提问于2019-03-20得票数 0
回答已采纳
在next.js中放置Yammer共享按钮听起来像是一项简单的任务。从yammer读取documentation似乎只是在Head Component中添加源代码，然后用<span id="yj-share-button"></span>调用它 export default function YammerButton() {
return (
<>
<Head>
<script type="text/javascript"
浏览 14提问于2021-02-03得票数 1
1回答
我正在尝试使用终结者和next.js来创建一个应用程序
我创建了nextjs应用程序，然后运行了以下命令：
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
在此之后，我更新了tailwind.config.js如下：
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
浏览 9提问于2022-03-03得票数 0
在next.js中，您可以使用根目录中的“公共”目录来提供静态资产。我在这个目录中有我的index.html文件，因为我希望我的登录页面是纯静态的。 但是，在使用next或next start时，我无法访问http://localhost:3000/的登录页面。我只能通过"http://localhost:3000/index.html“访问我的登录页面。 有没有办法设置next.js，以便顶级域名(http://localhost:3000)可以为我的登录页面提供服务？
浏览 91提问于2020-04-04得票数 3
回答已采纳
6回答
Next.js dynamic()专用组件并不是真正简单的测试。我现在有两个问题；
第一个jest未能正确编译动态导入(require.resolveWeak is not a function -似乎是由下一个babel插件添加的)
第二，我无法很好地了解modules逻辑；在尝试呈现动态组件时，它似乎根本没有运行。
浏览 1提问于2017-10-24得票数 20
回答已采纳
我使用React和Next.js，并试图在页面的数据无法使用Router.push('/another-page')时从页面重定向用户。
为此，我在getInitalProps中检查状态代码并应用条件。看起来是这样的：
const statusCode = action.currentArticle ? 200 : 404
if (isServer) res.statusCode = statusCode
if (statusCode === 404) {
Router.push('/')
}
状态代码正在正确设置，并使其位于条件内，
浏览 0提问于2018-03-02得票数 4
回答已采纳
2回答
顺风css在部署时不起作用
、、、、
我已经在我的next.js应用程序中安装了顺风，它在我的本地主机上工作，但是当我将它部署到vercel或者构建它并运行它时，它不使用顺风类，它看起来就像在部署时没有安装顺风。
这是我的包裹
{
"name": "portofilo",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build
浏览 4提问于2021-08-21得票数 0
回答已采纳
1回答
我正试图用Nuxt在上生成一个静态网站。在这段代码中，我特别集成了tailwindcss工具包和vue2-leaflet。在
nuxt generate
我得到两个css文件，一个用于tailwindcss css，另一个用于leaflet css。虽然前一个文件很好，包含了我需要的所有内容，但是后者非常稀疏：
.leaflet-tile-pane{z-index:200}@-webkit-keyframes leaflet-gestures-fadein{to{opacity:1}}@keyframes leaflet-gestures-fadein{0%{opacity:0}to{opac
浏览 7提问于2020-01-14得票数 0
回答已采纳
我正在创建一个本地约250MB的SQLite数据库的小型Next.js应用程序。我将mydb.sqlite文件放在项目的根文件夹中，并使用导入它
import sqlite from 'better-sqlite3';
export const db = sqlite('./mydb.sqlite');
我有两个服务器端渲染(SSR)路由，它们从DB查询数据并在React页面中呈现它们。这在本地可以很好地与本地主机上的next dev配合使用。但是，当我部署到Vercel，并访问相同的SSR页面时，我在运行时得到错误：
ERROR SqliteError:
浏览 38提问于2021-05-12得票数 2
2回答
我有一个我维护的私有NPM包，我在Next.js项目中使用它。这两个项目都是React、Typescript项目。 我最近在NPM项目中添加了一个图形，现在遇到了这样的问题: NPM包中所有对窗口的调用都会在Next.js项目中抛出一个错误window is undefined 因为我正在使用一个我无法控制的库来构建我的图形，所以我没有机会将对window的调用包装在某种if (typeof window !== "undefined")语句中。 我在构建Next.js项目时收到这些错误，甚至在我调用使用图形库的组件之前。简单地将NPM包包含在我的主项目中会导致出现这些错误。
浏览 71提问于2020-08-19得票数 2
回答已采纳
当我尝试创建一个新的Next.js Tailwind 'App‘(使用以下命令：npx create-next-app -e with-tailwindcss my-project)时，我得到以下错误：
C:\socialmedia3>npx create-next-app -e with-tailwindcss socialmedia3
Creating a new Next.js app in C:\socialmedia3\socialmedia3.
Downloading files for example with-tailwindcss. This might ta
浏览 9提问于2022-03-27得票数 0
回答已采纳
2回答
最近，我根据帖子更新了我的Node。然而，现在当我创建一个新的Next.js应用程序并使用npm run dev运行它时，我会得到以下错误：
error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[2]!.
浏览 10提问于2022-07-27得票数 0
回答已采纳
我正在尝试创建一个next.js应用程序，但是当我输入以下命令时：
yarn create next-app -e -tailwindcss demo-app-full
结果总是有一个错误，即：-
$ yarn create next-app -e -tailwindcss demo-app-full
yarn create v1.22.17
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success I
浏览 9提问于2022-02-03得票数 0
1回答
我遵循了Tailwind ，但出于某种原因，它在我的Next.js项目中看起来一点也不像它。
这是我的tailwind.config.ts：
export const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
theme: {
extend: {
fontFamily: {
sans: ["Inter var",
浏览 8提问于2022-03-12得票数 0
3回答
根据tailwindcss.com中的文档，我已经安装了顺风，vue在laravel中。但它是这样呈现在下面-
为什么？
Configuration:
使用命令安装了尾风
npm install -D tailwindcss
npx tailwindcss init
2)在tailwind.config.js中添加
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
3)在input.css中添加
@tailwi
浏览 3提问于2022-05-04得票数 0
1回答
每次添加类时，为了查看更改，我必须停止运行nuxt，重新加载vs代码窗口并再次运行"npm“。然后我就能看到变化了
我的tailwind.config.js：
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./components/**/*.{js,vue,ts}',
'./layouts/**/*.vue',
'./pages/**/*.vue',
浏览 24提问于2022-10-05得票数 0
我试着用的尾风插件来对生成的评论forms进行样式化。
tailwindcs-forms要求在<input type="">级别上应用顺风样式的class。
但是，在django注释框架中，HTML文件(例如)无法访问<input type="">，而<input type="">是在模板呈现过程中通过模板variables (例如{{ form.comment }} )自动生成的。
我该怎么处理这个困境？使用tailwindcss-forms生成django注释框架生成的样式是否真的可行？
浏览 5提问于2021-09-09得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
