Exploring the integration of Tailwind CSS code within a basic HTML file for utilization in a React project

I have been incorporating Tailwind CSS code in my React projects, mostly within a CSS file using @apply. Now I am interested in transitioning to simple HTML with the Tailwind CDN. How can I make this switch seamlessly?

Here is an example of what I currently have:

React code with Tailwind

Additionally, here are the codesandbox links for the React and HTML files:

HTML codesandbox link

And here is how I want it to look after switching to Tailwind with HTML design:

Tailwind with HTML design preview

If anyone can provide assistance on making this transition, it would be greatly appreciated.

htmlcssreactjstailwind-css

Answer №1

Hey there,

If you want to incorporate tailwindcss into your HTML codebase, make sure to properly set it up and avoid copying the component code from your React project directly into the HTML page. For guidance on setting up tailwindcss in HTML, refer to this documentation: https://tailwindcss.com/docs/installation

Answer №2

To implement CDN and make it functional, you need to add postcss through a trial run.

<!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
      class="min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8"
    >
      <div class="max-w-md w-full space-y-8">
        <div>
          <img
            class="mx-auto h-12 w-auto"
            src="https://tailwindui.com/img/logos/workflow-mark.svg?color=indigo&shade=600"
            alt="Workflow"
          />
          <h2
            class="mt-6 text-center text-3xl tracking-tight font-bold text-gray-900"
          >
            Sign in to your account
          </h2>
          <p class="mt-2 text-center text-sm text-gray-600">
            Or
            <a
              href="#"
              class="font-medium text-indigo-600 hover:text-indigo-500"
            >
              start your 14-day free trial
            </a>
          </p>
        </div>
        <form class="mt-8 space-y-6" action="#" method="POST">
          <input type="hidden" name="remember" value="true" />
          <div class="rounded-md shadow-sm -space-y-px">
            <div>
              <label for="email-address" class="sr-only">Email address</label>
              <input
                id="email-address"
                name="email"
                type="email"
                autocomplete="email"
                required
                class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
                placeholder="Email address"
              />
            </div>
            <div>
              <label for="password" class="sr-only">Password</label>
              <input
                id="password"
                name="password"
                type="password"
                autocomplete="current-password"
                required
                class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
                placeholder="Password"
              />
            </div>
          </div>

          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <input
                id="remember-me"
                name="remember-me"
                type="checkbox"
                class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
              />
              <label for="remember-me" class="ml-2 block text-sm text-gray-900">
                Remember me
              </label>
            </div>

            <div class="text-sm">
              <a
                href="#"
                class="font-medium text-indigo-600 hover:text-indigo-500"
              >
                Forgot your password?
              </a>
            </div>
          </div>

          <div>
            <button
              type="submit"
              class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
            >
              <span class="absolute left-0 inset-y-0 flex items-center pl-3">
                <!-- Heroicon name: solid/lock-closed -->
                <svg
                  class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400"
                  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>

visit Official Documentation

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Turn off padding in material ui card

Currently, I am utilizing a material UI card and upon inspecting the card, I noticed the presence of this unique class: "MulticardContent-root". This class adds padding of 16 which I would like to remove. Strangely, it is not located within the styles co ...

cssmaterial-ui

Creating a scrolling effect similar to the Nest Thermostat

After researching countless references, I am determined to achieve a scrolling effect similar to the Nest Thermostat. I came across this solution on this JSFiddle, but unfortunately, the parent element has a fixed position that cannot be utilized within my ...

javascripthtmljquerycssparallax

Python: Automate clicking on checkboxes with Selenium

Recently, I've encountered a problem and I'm in search of an answer. Below is some HTML code that I need to work with. My goal is to send a snippet of this HTML to selenium so that it can click on a checkbox. However, I don't want to use the ...

pythonhtmlselenium

When utilizing Material-UI Dialog or Modal and clicking on a TextField, the field loses focus each time an onChange

<List key={"test1"} style={{ marginBottom: '10px' }}> <TextField required id="filled-basic" key={categoryData.title} label="Title" ...

reactjsmaterial-uidialog

The table does not move up or down when using the mousewheel over the rows, but only when

I'm encountering an issue with a table inside a div that has overflow-y: scroll applied to it. While the scrollbar appears when there is content overflow, I am unable to scroll using the scrollwheel. It only works when the cursor is directly on top o ...

htmlcssscroll

I'm experiencing unexpected behavior with the <form> element in React, it's not functioning as I

I have encountered a strange behavior while trying to implement a form element for user input. When I directly insert the form element, everything works perfectly fine as I type in the letters. However, if I insert the form element through the AddForm comp ...

javascriptreactjsformsinput

Guide on invoking a POST endpoint within another POST API in a Node.js Express server

I encountered an issue while attempting to use fetch in react.js with a backend node.js API URL, which then proceeds to make a POST API call within the server to another route utilizing a different URL. How can I tackle this task effectively? See the code ...

javascriptnode.jsreactjsrestexpress

Having trouble deploying my MERN app on Vercel because I keep getting a "NOT FOUND" error message

I am encountering an issue while attempting to deploy my MERN App on Vercel - I keep receiving a "NOT FOUND" error. Interestingly, when I set NODE_ENV to PRODUCTION, the app works fine and serves the static files locally when running npm start. However, t ...

node.jsreactjsmongodbexpressvercel

TypeError: Unable to execute products.map as a function

I'm encountering an issue where product.map is not functioning as expected, despite trying multiple fixes found online. Additionally, when I console.log(response.data), it shows a successful response. Using React version 7.0 constructor () { ...

javascriptreactjslaravelaxios

Getting YQL financial information using jQuery and showing it using the .html() method

Struggling with the .html() function and YQL data pulled issue. Despite data being pulled successfully (as seen in the YQL console), it is not being displayed. Here's the provided code snippet: HTML Section <ul id="TECO-container"> <li ...

javascripthtmljsonyql

What is the optimal platform for sending OTP via SMS in Nodejs? I experimented with twilio, but my account kept getting suspended because of my Geo location

Before, I used Twilio for another project without any issues. However, after creating 2 new accounts with my business email and adding $20 to send SMS, my account was immediately suspended for verification. Now, when I try to log in, I am only seeing the f ...

node.jsreactjstwiliosmsforgot-password

What is the reason behind the browser not reusing the authorization headers following an authenticated XMLHttpRequest?

As I work on developing a Single Page Application using Angular, I have encountered an interesting challenge. The backend system exposes REST services that require Basic authentication. Surprisingly, while obtaining index.html or any of the scripts does no ...

javascripthtmlangularjsbasic-authenticationsingle-page-application

Does CSS give preference to max width specifications?

Within a div, I have two child div elements. The parent container utilizes a flexbox layout, with preset maximum widths for the children as shown below: <div class="wrap"> <div class="one">Hi</div> <div class="two">my secon ...

htmlcssflexbox

What is the best way to disable stacking toasts in bootstrap?

I have been experimenting with stacking Bootstrap toasts, but I am encountering an issue with the close buttons not functioning as expected. Currently, I am only able to close the most recent toast and none of the others. My attempt at adding an event lis ...

jqueryhtmlbootstrap-4

React hooks causing dynamic object to be erroneously converted into NaN values

My database retrieves data from a time series, indicating the milliseconds an object spends in various states within an hour. The format of the data is as follows: { id: mejfa24191@$kr, timestamp: 2023-07-25T12:51:24.000Z, // This field is dynamic ...

javascriptreactjstypescriptnext.jsreact-hooks

What is the best way to save the data from a reused component for future reference?

Within my current application, I am grappling with the concept of state management. The specific issue lies in how to handle the state of a particular component that is reusable multiple times. In this case, changing the state every time poses a challenge. ...

reactjs

An oversized image creates additional room

I currently have a board that consists of 3 blocks, with each block containing a grid of 25 squares. These squares are 40x40px in size with a margin around them, resulting in an overall size of 220px x 220px. Each square also has some space above and below ...

htmlcss

Obtain the row ID from a database by selecting checkboxes

I am facing a challenge when trying to remove a row from my MS Access database using checkboxes on my JSP page. Each row in the displayed database has a checkbox, but I am struggling to retrieve the rowId and link each checkbox with its respective row. Any ...

javascripthtmljspcheckbox

What causes a 404 error to occur when attempting to access an established route?

I have been encountering an issue while attempting to transfer input data from my registration page to my mongoDB database using an express.js route. Despite creating the specified route, I keep receiving a 404 error: not found. In server2.js (Configuring ...

node.jsreactjsexpressserverurl-routing

Is it possible to simultaneously toggle buttons and submit a form?

I am currently working on a functionality that involves toggling the display of two buttons and submitting a form. Code toggleButtons() { var btn1 = document.getElementById("start"); var btn2 = document.getElementById("pause"); if (btn1.style. ...

javascripthtml