Last Updated: 

Converting Vanilla HTML, CSS, and JS to JSX and Tailwind

In modern web development, the shift from traditional vanilla HTML, CSS, and JavaScript to more advanced frameworks and utility-first CSS libraries like React (using JSX) and Tailwind CSS has become increasingly popular. JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write HTML-like code within your JavaScript files, which is commonly used in React applications. Tailwind CSS is a highly customizable, low-level CSS framework that provides a set of utility classes to style your components quickly. Converting a project from vanilla technologies to JSX and Tailwind can bring numerous benefits, such as better component-based architecture, improved maintainability, and faster development cycles. In this blog post, we'll explore the fundamental concepts, usage methods, common practices, and best practices for making this conversion.

Table of Contents#

  1. Fundamental Concepts
  2. Usage Methods
  3. Common Practices
  4. Best Practices
  5. Conclusion
  6. References

Fundamental Concepts#

JSX#

JSX is a syntax sugar that makes it easier to write and understand the structure of your UI components in React. It allows you to embed HTML-like code directly in your JavaScript files. For example, instead of creating DOM elements using document.createElement in vanilla JavaScript, you can write:

const element = <h1>Hello, World!</h1>;

JSX expressions are compiled into React.createElement() calls. The above code is equivalent to:

const element = React.createElement('h1', null, 'Hello, World!');

Tailwind CSS#

Tailwind CSS is a utility-first CSS framework. Instead of writing custom CSS classes for every element, you use predefined utility classes directly in your HTML (or JSX) to style your components. For example, to create a red button with some padding, you can use the following classes:

<button class="bg-red-500 text-white py-2 px-4 rounded">Click me</button>

Conversion Concepts#

When converting from vanilla HTML, CSS, and JS to JSX and Tailwind, you need to break down your HTML into React components. Each component should have a single responsibility. The CSS styles are then replaced with Tailwind utility classes. And the JavaScript logic is integrated into the React component's lifecycle methods or hooks.

Usage Methods#

Step 1: Set up a React Project#

First, you need to create a new React project. You can use create - react - app to quickly set up a new project:

npx create-react-app my - project
cd my - project

Step 2: Install Tailwind CSS#

Install Tailwind CSS and its dependencies:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure Tailwind in your tailwind.config.js file:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Import Tailwind in your src/index.css file:

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

Step 3: Convert HTML to JSX#

Take a simple HTML file:

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF - 8">
  <title>Vanilla Page</title>
</head>
 
<body>
  <div class="container">
    <h1>Welcome to my page</h1>
    <p>This is a simple vanilla HTML page.</p>
  </div>
</body>
 
</html>

Convert it to a React component in a .jsx file:

import React from 'react';
 
const MyPage = () => {
  return (
    <div className="container">
      <h1>Welcome to my page</h1>
      <p>This is a simple vanilla HTML page.</p>
    </div>
  );
};
 
export default MyPage;

Note that in JSX, we use className instead of class because class is a reserved keyword in JavaScript.

Step 4: Convert CSS to Tailwind#

If the original HTML had some custom CSS like:

.container {
  width: 80%;
  margin: 0 auto;
}
 
h1 {
  color: blue;
  font - size: 24px;
}
 
p {
  color: gray;
}

We can replace these styles with Tailwind classes:

import React from 'react';
 
const MyPage = () => {
  return (
    <div className="w - 4/5 mx - auto">
      <h1 className="text - blue - 500 text - 2xl">Welcome to my page</h1>
      <p className="text - gray - 500">This is a simple vanilla HTML page.</p>
    </div>
  );
};
 
export default MyPage;

Step 5: Integrate JavaScript Logic#

If the original JavaScript had some functionality like toggling a class on a button click:

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF - 8">
  <title>Vanilla Page</title>
  <style>
    .highlight {
      background - color: yellow;
    }
  </style>
</head>
 
<body>
  <button id="toggleButton">Toggle Highlight</button>
  <p id="myText">This is some text.</p>
  <script>
    const button = document.getElementById('toggleButton');
    const text = document.getElementById('myText');
    button.addEventListener('click', () => {
      text.classList.toggle('highlight');
    });
  </script>
</body>
 
</html>

In React, we can use the useState hook to achieve the same functionality:

import React, { useState } from 'react';
 
const ToggleText = () => {
  const [isHighlighted, setIsHighlighted] = useState(false);
 
  const toggleHighlight = () => {
    setIsHighlighted(!isHighlighted);
  };
 
  return (
    <div>
      <button onClick={toggleHighlight}>Toggle Highlight</button>
      <p className={isHighlighted ? 'bg - yellow - 200' : ''}>This is some text.</p>
    </div>
  );
};
 
export default ToggleText;

Common Practices#

Component Breakdown#

Break down your large HTML pages into smaller, reusable React components. For example, if you have a navigation bar in your HTML, create a separate NavBar component in React.

Use Semantic HTML#

Even when using Tailwind classes, try to use semantic HTML tags like <header>, <nav>, <main>, etc. This improves accessibility and SEO.

Keep JSX Clean#

Avoid over-nesting JSX components. If a component becomes too complex, break it down further.

Best Practices#

Use Conditional Classes Wisely#

When using conditional classes in Tailwind, use a library like classnames to make the code more readable. For example:

import React, { useState } from 'react';
import classNames from 'classnames';
 
const ConditionalText = () => {
  const [isActive, setIsActive] = useState(false);
 
  const toggleActive = () => {
    setIsActive(!isActive);
  };
 
  const textClasses = classNames({
    'text - blue - 500': isActive,
    'text - gray - 500': !isActive
  });
 
  return (
    <div>
      <button onClick={toggleActive}>Toggle Active</button>
      <p className={textClasses}>This is some text.</p>
    </div>
  );
};
 
export default ConditionalText;

Leverage Tailwind's Responsive Design#

Tailwind provides responsive classes out of the box. Use them to make your components look good on different screen sizes. For example, md:w - 1/2 will make an element take up half the width on medium screens and above.

Write Testable Components#

When converting to React, write unit tests for your components using testing libraries like Jest and React Testing Library. This ensures the stability of your application as it grows.

Conclusion#

Converting from vanilla HTML, CSS, and JS to JSX and Tailwind can significantly improve the maintainability, scalability, and development speed of your web projects. By understanding the fundamental concepts, following the usage methods, and adopting common and best practices, you can make a smooth transition. Remember to break down your UI into components, replace CSS with Tailwind classes, and integrate JavaScript logic using React hooks.

References#

2025-10