How to use tailwind css code in simple html file which is used in react-CodePudding

I used tailwind css code in react mostly in a css file where i used @apply. Now i want to switch to simple html with tailwind cdn so how can i do that?

IT LOOKS LIKE THIS

React code with tailwind

And this is html file codesandbox

https://codesandbox.io/s/affectionate-herschel-ypb3de?file=/index.html

and it looks like this

TAILWIND WITH html design

can someone help me with this?

CodePudding user response：

mustryy,

Set up the tailwindcss for your HTML codebase, and copy the complete code of your react project into your HTML page, But be careful that don't copy the component code from responding to HTML.

Read this documentation for tailwindcss set up in HTML - https://tailwindcss.com/docs/installation

CodePudding user response：

Basically adding CDN and its works. but it's not working so install postcss through try

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div
      
    >
      <div >
        <div>
          <img
            
            src="https://tailwindui.com/img/logos/workflow-mark.svg?color=indigo&shade=600"
            alt="Workflow"
          />
          <h2
            
          >
            Sign in to your account
          </h2>
          <p >
            Or
            <a
              href="#"
              
            >
              start your 14-day free trial
            </a>
          </p>
        </div>
        <form  action="#" method="POST">
          <input type="hidden" name="remember" value="true" />
          <div >
            <div>
              <label for="email-address" >Email address</label>
              <input
                id="email-address"
                name="email"
                type="email"
                autocomplete="email"
                required
                
                placeholder="Email address"
              />
            </div>
            <div>
              <label for="password" >Password</label>
              <input
                id="password"
                name="password"
                type="password"
                autocomplete="current-password"
                required
                
                placeholder="Password"
              />
            </div>
          </div>

          <div >
            <div >
              <input
                id="remember-me"
                name="remember-me"
                type="checkbox"
                
              />
              <label for="remember-me" >
                Remember me
              </label>
            </div>

            <div >
              <a
                href="#"
                
              >
                Forgot your password?
              </a>
            </div>
          </div>

          <div>
            <button
              type="submit"
              
            >
              <span >
                <!-- Heroicon name: solid/lock-closed -->
                <svg
                  
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                  aria-hidden="true"
                >
                  <path
                    fill-rule="evenodd"
                    d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
                    clip-rule="evenodd"
                  />
                </svg>
              </span>
              Sign in
            </button>
          </div>
        </form>
      </div>
    </div>
  </body>
</html>

checkout Documentation