英文:

Why is TailWind CSS Toggle not working in localhost?

问题

我已经使用Tailwind CSS为ToDo页面设计了一个侧边栏，并且在该侧边栏中，我想要一个按钮来在暗黑模式和亮色模式之间切换。我从FlowBite复制了仅切换（而不是切换模式，这部分稍后处理）的代码。

以下是代码：

<div>
    <aside class='bg-gray-900 w-64 h-screen py-10'>
        <div class='flex items-start justify-start h-10 w-auto py-5 mt-6 cursor-pointer'>
            <CiDark class='ml-8' style={{ color: "white" }} size={32} />
            <span class='ml-3 text-white font-semibold text-xl'>Dark Mode</span>
            <label class='relative inline-flex items-center cursor-pointer'>
                <input type="checkbox" value="" class="sr-only peer" checked />
                <div class="w-11 h-6 bg-gray-200 mt-1 ml-2 rounded-full peer-checked:after:translate-x-full  peer-checked:after:border-white peer:after:content-[''] after:absolute after:top-0.7 after:left-[5px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-blue-600"></div>
            </label>
        </div>
    </aside>
</div>

这段代码在Tailwind CSS的playground上可以工作，并且我可以进行切换。但是在本地主机上，它就是无法切换。

以下是我如何在我的React项目中添加Tailwind的方式：

Index.css

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

Index.js

import ReactDOM from 'react-dom/client';
import React from 'react';
import App from './App.js';
import './index.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./src/**/*.{js,jsx,ts,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

除此之外，Tailwind的其他部分都正常工作。只有切换功能不起作用。

<details>
<summary>英文:</summary>

I have been designing a sidebar for a ToDo page by using Tailwind CSS and in that sidebar, i want a button to toggle between darkmode and lightmode. I copied the code of just Toggling (not switching mode, which I will handle later)  from FlowBite. 

Here is the code:

    &lt;div&gt;
        &lt;aside class=&#39;bg-gray-900 w-64 h-screen py-10&#39;&gt;
            &lt;div class=&#39;flex items-start justify-start h-10 w-auto py-5 mt-6 cursor-pointer&#39;&gt;
                &lt;CiDark class=&#39;ml-8&#39; style={{ color: &quot;white&quot; }} size={32} /&gt;
                &lt;span class=&#39;ml-3 text-white font-semibold text-xl&#39;&gt;Dark Mode&lt;/span&gt;
                &lt;label class=&#39;relative inline-flex items-center cursor-pointer&#39;&gt;
                    &lt;input type=&quot;checkbox&quot; value=&quot;&quot; class=&quot;sr-only peer&quot; checked /&gt;
                    &lt;div class=&quot;w-11 h-6 bg-gray-200 mt-1 ml-2 rounded-full peer-checked:after:translate-x-full  peer-checked:after:border-white peer:after:content-[&#39;&#39;] after:absolute after:top-0.7 after:left-[5px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-blue-600&quot;&gt;&lt;/div&gt;
                &lt;/label&gt;
            &lt;/div&gt;
        &lt;/aside&gt;
    &lt;/div&gt;

This code works on Tailwind CSS [playground][1] and i am able to toggle. But in localhost, this just won&#39;t toggle.

Here is how I have added Tailwind in my react project:

Index.css

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

Index.js

    import ReactDOM from &#39;react-dom/client&#39;;
    import React from &#39;react&#39;;
    import App from &#39;./App.js&#39;
    import &#39;./index.css&#39;

    const root = ReactDOM.createRoot(document.getElementById(&#39;root&#39;));
    root.render(
        &lt;React.StrictMode&gt;
            &lt;App /&gt;
        &lt;/React.StrictMode&gt;
    );

tailwind.config.js&lt;br/&gt;

    /** @type {import(&#39;tailwindcss&#39;).Config} */
    module.exports = {
    content: [
    &quot;./src/**/*.{js,jsx,ts,tsx}&quot;,
    ],
    theme: {
    extend: {},
    },
    plugins: [],
    }

Also rest of Tailwind is working okay. Its only toggle which is not responsive.


  [1]: https://play.tailwindcss.com/T3IJ1ajM0Y

</details>


# 答案1
**得分**: 1

React告诉你原因了。请查看你的控制台输出。你应该能找到类似以下的内容：

&gt; 警告：你给一个表单字段提供了`checked`属性，但没有提供`onChange`处理函数。这将渲染一个只读字段。如果字段应该是可变的，请使用`defaultChecked`。否则，请设置`onChange`或`readOnly`。

如果你将"checked"改为"defaultChecked"，应该可以解决问题。虽然与你的问题无关，但你还应该将所有出现的"class"改为"className"。在JavaScript中，"class"是一个保留字。

<details>
<summary>英文:</summary>

React tells you why. Have a look into your console output. You should find something like:

&gt; Warning: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`.

It should work if you change &quot;checked&quot; to &quot;defaultChecked&quot;. Not related to your problem, but you should also change all occurences of &quot;class&quot; into &quot;className&quot;. class is a reserved word in Javascript.

</details>