条纹上的聚焦元素无法与Tailwind一起使用

问题描述

在我的React应用程序中，我在表单中包含以下代码：

C:\Users\pCd>pip install pygame
Collecting pygame
  Using cached pygame-1.9.6.tar.gz (3.2 MB)
    ERROR: Command errored out with exit status 1: command: 'c:\python\python.exe' -c 'import sys,setuptools,tokenize; sys.argv[0] = '"'"'C:\\Users\\pCd\\AppData\\Local\\Temp\\pip-install-i9uohpid\\pygame\\setup.py'"'"'; __file__='"'"'C:\\Users\\pCd\\AppData\\Local\\Temp\\pip-install-i9uohpid\\pygame\\setup.py'"'"';f=getattr(tokenize,'"'"'open'"'"',open)(__file__);code=f.read().replace('"'"'\r\n'"'"','"'"'\n'"'"');f.close();exec(compile(code,__file__,'"'"'exec'"'"'))' egg_info --egg-base 'C:\Users\pCd\AppData\Local\Temp\pip-pip-egg-info-n48e7goc'
cwd: C:\Users\pCd\AppData\Local\Temp\pip-install-i9uohpid\pygame\Complete output (17 lines):

WARNING,No "Setup" File Exists,Running "buildconfig/config.py"
Using WINDOWS configuration...

Download prebuilts to "prebuilt_downloads" and copy to "./prebuilt-x64"? [Y/n]Traceback (most recent call last):
  File "<string>",line 1,in <module>
  File "C:\Users\pCd\AppData\Local\Temp\pip-install-i9uohpid\pygame\setup.py",line 194,in <module> buildconfig.config.main(AUTO_CONFIG)
  File "C:\Users\pCd\AppData\Local\Temp\pip-install-i9uohpid\pygame\buildconfig\config.py",line 210,in main deps = CFG.main(**kwds)
  File "C:\Users\pCd\AppData\Local\Temp\pip-install-i9uohpid\pygame\buildconfig\config_win.py",line 576,in main and download_win_prebuilt.ask(**download_kwargs):
  File "C:\Users\pCd\AppData\Local\Temp\pip-install-i9uohpid\pygame\buildconfig\download_win_prebuilt.py",line 302,in ask reply = raw_input(
EOFError: EOF when reading a line

ERROR: Command errored out with exit status 1: python setup.py egg_info Check the logs for full command output.

“ CardElement”是React Stripe Js的一部分。一切正常，但“ focus：border-orange-400”无法正常工作。

正如我从Stripe文档中学到的，您还可以执行以下操作：

<div className="focus:border-orange-400 bg-white border appearance-none border-gray-400"> <CardElement /> </div>

但是那样，我无法使用Tailwind CSS，就像在第一段代码中一样。

有什么建议吗？

非常感谢您，

解决方法

react-stripe-js将在iFrame中呈现Stripe元素，这意味着Tailwind的CSS不会被内部元素拾取。如您所见，Stripe将使您能够访问创建元素时可以传递的某些CSS properties。

您将无法使用Tailwind预定义的CSS变量和类名，但是您可以查看Tailwind源并将其通过使用:focus伪元素传递给Element。