Integrating DaisyUI & Tailwind CSS for Stunning Interfaces

Daisy UI is a set of customizable components for Tailwind CSS that can help you quickly build beautiful and responsive user interfaces in this tutorial we'll walk you through the process of installing Daisy UI on a react application.

To start let's create a new react application you can do this using the create react app command:

npx create-react-app my-app

Next we need to install Tailwind CSS using npm or yarn. Open up your terminal or command prompt and run the following command:

npm install tailwindcss

This command will install the Tailwind CSS framework in your project.

Once Tailwind CSS is installed we need to create a configuration file for it run the following command to create a Tailwind CSS configuration file:

npx tailwindcss init

This will create a tailwind.config.js file in your project root directory. Open up the file and add the following code:

module.exports = {
  content: ["./src/**/*.html", "./src/**/*.js", "./src/**/*.jsx"],
  theme: {},
  plugins: [],
};

This code tells Tailwind CSS to look for HTML JavaScript and jsx files in the SRC directory and its subdirectories.

Now we can install the daisy UI Library using npm or yarn open up your terminal or command prompt and run the following command:

npm install daisyui

This command will install the daisy UI library and all its dependencies in your project.

Now let's enable Daisy UI by adding it to the plugins array in tailwind.config.js

module.exports = {
  content: ["./src/**/*.html", "./src/**/*.js", "./src/**/*.jsx"],
  theme: {},
  plugins: [require("daisyui")],
};

Next we need to import Tailwind CSS and Daisy UI into our react app. Open SRC index.css and replace its content with the following:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Let's test our setup open app.js and replace its content with the following:

import './App.css';
import React from 'react';

function App() {
  return (
    <div className="bg-gray-100 min-h-screen p-6">
      <h1 className="text-4xl font-bold mb-6">DaisyUI and Tailwind CSS in           React</h1>
      <button className="btn btn-primary">Click me!</button>
    </div>
  );
}

export default App;

Now start your development server by running

npm start

Open your browser and navigate to localhost 3000, you should see the text Daisy UI and Tailwind CSS in react along with a style button:

Now that you have Daisy UI and Tailwind CSS setup in your react app you can start building beautiful and responsive user interfaces with ease.

Make sure to check out the official documentation for both libraries to learn more about their features and components:

Official documentation:

Tailwind CSS: https://tailwindcss.com/

DaisyUI https://daisyui.com/

I hope you found this helpful, if you have any questions or suggestions please leave them in the comments below.

Don't forget to like share and subscribe for more great tutorials like this one

🧑‍💻 Happy coding!!

🙌 Follow me on