laravel + react + tailwindcss

hansal answered on June 23, 2024 Popularity 4/10 Helpfulness 2/10

answer laravel + react + tailwindcss

laravel + react + tailwindcss

Comment

// that is specific steps to setup laravel, react and tailwindcss

// in the terminal
composer create-project laravel/laravel laravel-app
cd laravel-app
npm install react react-dom @vitejs/plugin-react

// change the vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/index.jsx'],
            refresh: true,
        }),
        react(),
    ],
});

// rename app.js to app.jsx
// add test code
import {createRoot} from "react-dom/client";
const root = createRoot(document.getElementById('root'));
root.render("hello world!");

// update the  welcome.blade.php
// add in the head
@vite('resources/css/app.css')
// add in before </body>
<div class="root"></div>
@vite('resources/js/app.jsx')


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

// Configure Tailwind CSS
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.jsx',
    './resources/**/*.vue',
    './resources/**/*.ts',
    './resources/**/*.tsx',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

// add the css
/* resources/css/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

// finally test
npm run dev

Popularity 4/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript laravel reactjs tailwind-css

Link to this answer
Share Copy Link

Contributed on Jun 23 2024

hansal

0 Answers Avg Quality 2/10

laravel + react + tailwindcss

Contents

More Related Answers

laravel + react + tailwindcss

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.