Skip to content

Setup Tailwind CSS

ucan-lab edited this page Jun 3, 2023 · 2 revisions

Required: Setup Node

Tailwind CSS

Install Tailwind CSS

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

Edit tailwind config file

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Edit app.css

resources/css/app.css

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

Edit routing file

routes/web.php

Route::view('example', 'example');

Add blade file

resources/views/example.blade.php

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  @vite('resources/css/app.css')
</head>
<body class="bg-gray-400">
  <h1 class="text-3xl bg-red-500 font-bold underline">
    Hello world!
  </h1>
</body>
</html>

Run

$ npm run dev

http://localhost/example

ScreenShot 2023-06-03 22 30 24