Tutorials Programming Tutorials, Guides & Best Practices

   module.exports = {
       content: [
           './resources/**/*.blade.php',
           './resources/**/*.js',
           './resources/**/*.vue',
       ],
       theme: {
           extend: {},
       },
       plugins: [],
   };

Open or create resources/css/app.css and add the Tailwind CSS directives:

Open your browser and navigate to http://localhost:5173/ (or the port provided by Vite). You should see the default React application running with Tailwind CSS included.

Depending on the needs of your project, you might want to add additional packages. Below are some commonly used ones in React projects:

After making changes to the configuration, rebuild the CSS:

You've successfully set up Tailwind CSS and built a responsive web layout. Tailwind's utility-first approach provides a flexible and efficient way to create modern web designs without writing custom CSS.

• px-6 py-4 whitespace-nowrap text-sm text-gray-900: Data cell styling.

Feel free to adjust the class names to fit your design requirements.