带有邮政信箱和parwindcss的gatsby网站建筑物

问题描述 投票：0回答：3
I遵循指南

https：//medium.com/@mikeeeeeeeey/create-react-papp-tailwind-css-feat-postcs-postcs-631d9e33ba8c，用于使用我的盖茨比（Gatsby）项目中的tablege。

为了参考，这是尾风配置文件

mode: 'jit', purge: ['./src/**/*.{js,jsx,ts,tsx}'], darkMode: false, // or 'media' or 'class' theme: { extend: { colors: { blue: { 50: '#EDFAFD', 100: '#CAF0F8', 200: '#ADE8F4', 300: '#90E0EF', 400: '#48CAE4', 500: '#00B4D8', 600: '#0096C7', 700: '#0077B6', 800: '#023E8A', 900: '#03045E', }, }, ringWidth: ['hover', 'active', 'focus'], fontFamily: { 'sans': ['Inter'], 'mono': ['Roboto Mono'], }, }, }, variants: { extend: { fill: ['hover', 'focus'], stroke: ['hover', 'focus'], fontWeight: ['hover', 'focus', 'active'], textColor: ['hover', 'focus', 'active'], ringWidth: ['hover', 'active'], }, }, plugins: [], }

这是我的Postcss配置文件

module.exports = { plugins: [ tailwindcss('./tailwind.config.js'), require('autoprefixer'), ], };

package.json

{ "name": "kabira-mobility", "version": "1.0.0", "private": true, "description": "Kabira Mobility", "author": "sagarsiwach", "keywords": [ "gatsby" ], "scripts": { "build:css": "postcss src/styles/styles.css -o src/index.css", "watch:css": "postcss src/styles/styles.css -o src/index.css -w", "develop": "npm run watch:css & gatsby develop", "start": "npm run watch:css & gatsby develop", "build": "npm run build:css && gatsby build", "serve": "gatsby serve", "clean": "gatsby clean" }, "dependencies": { "@headlessui/react": "^1.4.0", "@heroicons/react": "^1.0.3", "@react-google-maps/api": "^2.2.0", "gatsby": "^3.11.0", "gatsby-plugin-gatsby-cloud": "^2.11.0", "gatsby-plugin-image": "^1.11.0", "gatsby-plugin-postcss": "^4.11.0", "gatsby-source-contentful": "^5.11.0", "gatsby-transformer-sharp": "^3.11.0", "postcss": "^8.3.6", "react": "^17.0.1", "react-dom": "^17.0.1", "swiper": "^6.8.1" }, "devDependencies": { "autoprefixer": "^10.3.1", "postcss-cli": "^8.3.1", "tailwindcss": "^2.2.7" } } 
最后我的盖茨比config


module.exports = {
  siteMetadata: {
    siteUrl: "https://www.yourdomain.tld",
    title: "Kabira Mobility",
  },
  plugins: [
    {
      resolve: "gatsby-source-contentful",
      options: {
        accessToken: "#######MY Contentful Access Token########",
        spaceId: "#####My Contentful SpaceID######",
      },
    },
    "gatsby-plugin-postcss",
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`, // Needed for dynamic images
    "gatsby-plugin-gatsby-cloud",
  ],
};


此设置在开发模式下正常工作。但是，现在我正处于建筑阶段，但面临以下问题


warn warn - You have enabled the JIT engine which is currently in preview.
warn warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
⠙ Building production JavaScript and CSS bundles
/Users/sagarsiwach/Desktop/gatsby/kabira-august/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
        throw ex;
        ^

DataCloneError: function destructLexErrorInfo() {
          // remove cyclic references added to error info:
          // info....<omitted>... } could not be cloned.
    at reportError (/Users/sagarsiwach/Desktop/gatsby/kabira-august/node_modules/jest-worker/build/workers/threadChild.js:100:32)
    at reportClientError (/Users/sagarsiwach/Desktop/gatsby/kabira-august/node_modules/jest-worker/build/workers/threadChild.js:84:10)
Emitted 'error' event on Worker instance at:
    at Worker.[kOnErrorMessage] (node:internal/worker:297:10)
    at Worker.[kOnMessage] (node:internal/worker:308:37)
    at MessagePort.<anonymous> (node:internal/worker:211:57)
    at MessagePort.[nodejs.internal.kHybridDispatch] (node:internal/event_target:461:20)
    at MessagePort.exports.emitMessage (node:internal/per_context/messageport:23:28)
Sagars-MBP:kabira-august sagarsiwach$ 


我尝试搜索此问题，但没有得到任何可以解决此问题的答案。然后，我尝试了以下解决方案



RECETECETERETEED，并手动复制文件并逐步安装依赖项。一切都很好，直到此Postcss流程确定原因。

执行此过程两次，并更改了尾风安装方法，而没有任何错误。



任何人可以帮助我解决这个问题。

认为查看这篇文章并提供解决方案非常陌生
Cheers！
    

	


似乎只遵循official tailwind文档
    行不通。我不得不使用以下代码添加项目的根源。

  1. postcss.config.js
    2. 

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

    3. 
    




我认为您的Postcss配置应该看起来像：


// These are the package versions
"gatsby": "^5.4.0"
"gatsby-plugin-postcss": "^6.4.0",
"postcss": "^8.4.21",
"autoprefixer": "^10.4.13",
"tailwindcss": "^3.2.4",



检查


reactjs

frontend

gatsby

tailwind-css

postcss


3个回答




    
    
    

        

            

                

                    
1
投票

                    
                

            

        

        
集成以获取更多细节。
    


对于我来说，这是尾风的版本。盖茨比（Gatsby）的一个是
module.exports = () => ({
  plugins: [require("tailwindcss")],
})

，最新版本是
tailwind@v3
。它正确安装了Tailwind的版本4，但正在使用版本3配置，例如AutoPrefixer。我决定坚持最新版本，并且从Tailwind网站上获得了版本4的正确文档，并应用了以下步骤：


从

    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

        
。

安装了
autoprefixer
.


用来使用package.json（似乎不在乎我是否不将其重命名为 *.mjs）。
已编辑
@tailwindcss/postcss

    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

        
postcss.config.js
而不是
@tailwindcss/postcss
，
global.css
和
@import "tailwindcss"
    。

  1. 
版本3：
    Https：//v3.tailwindcss.com/docs/installation/using-postcss
    版本4的文档：
    Https：//tailwindcss.com/docs/installation/using-postcss
  2. 
    
    	
    3. 


    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2025. All rights reserved.