Laravel 8 Jetstream - Tailwind CSS not working

https://tailwindcss.com/docs/installation

Level 75

Install tailwind and see if all works. You can also use bootstrap.

jijoel

Level 10

Take a look at the Styles section of your welcome.blade.php file. By default, it doesn't load a css file. It just defines the handful of classes that it uses.

If you load the css file, you'll be able to access any classes in your app.css file:

<link rel="stylesheet" href="{{ mix('css/app.css') }}">

Note that ALL tailwind css classes won't be available unless you build dev assets. Unused classes automatically get stripped from prod assets. In my workflow, I run yarn dev, then yarn hot; do my work with that, and run yarn prod before committing anything to version control.

10 likes

daverydan

Level 11

npm run hot

Did it for me! Thanks-a-million!

Rretzko

Level 15

@jijoel Exactly the piece I was missing. Thanks for the documentation!

Macclinson

Level 1

@jijoel Thanks bro This should be regarded as best answer

enriq_san

Level 1

@jijoel Thanks! This worked for me!

Level 1

Welcome to Jetstream application says the following:

"Laravel Jetstream is built with Tailwind, an amazing utility first CSS framework that doesn't get in your way. You'll be amazed how easily you can build and maintain fresh, modern designs with this wonderful framework at your fingertips."

So if it's already built with Tailwind..... how can it be that it's not installed?

jlrdw

Level 75

You still have to finalize the installation and set up your laravel mix. I still use bootstrap.

Snapey

Level 122

The welcome view does not use tailwind.

It is designed to work with no front end preset installed (ie, without jetstream) so all its styles are contained in the page header

You should create a new view using one of the other pages as an example.

For instance;

<x-app-layout>

<!-- put your page content here -->

</x-app-layout>

Best Answer

Level 14

As jlrdw say, you just need to finalizing installation by running following commands to compile assets:

npm install && npm run dev

php artisan migrate

The same thing that you do in Laravel 7 for compile bootstrap assets.

Tailwind get installed when you install jetstream, means they add in package.json and tailwind config file, but you must run npm install to install dependencies and compile assets. Does this make sense?

@Snapey actually the welcome view is based on tailwind, but all styles is inline. I suppose for make it works without any compilation.

1 like

Level 1

Thank you for all your replies.... I just figured it out. Problems were:

1 - Npm not installed and obviously i couldn't run npm run dev. (I haven't touched laravel in 18 months so i forgot how important it was) 2 - welcome.blade.php was using normalize.css

jlrdw

Level 75

I would still recommend you actually read the documentation for yourself to get a good understanding.

Level 14

@triumfator tailwind.css start with normalize.css, you can see this also in app.css, but actually if you scroll all over source file of page, you can see other tailwind classes. Also you can notice a lot of classes in welcome page, which are of tailwind. Most probably that is a tailwind after purging unused classes, but is there.

Snapey

Level 122

@thewebartisan7 welcome view uses the same class names as tailwind but since it does not include tailwind you cannot add any tailwind classes that are not defined within the page == tailwind not installed on this page.

compiling the assets will have no effect on the welcome page

1 like

Level 14

I understand what you mean, that welcome page doesn't include "full" tailwind style like other page using app.css that has full tailwind. It use only some of classes of tailwind.

Level 1

I still find that something is messed up with the currently released version 8 of Laravel. Running npm run and dev gives me a bunch of warnings and I have the latest version of node / npm installed.

C:\xampp\project-temp1>npm install npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\watchpack\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

audited 1138 packages in 3.998s

43 packages are looking for funding run npm fund for details

found 0 vulnerabilities

C:\xampp\project-temp1>npm run dev

@ dev C:\xampp\project-temp1 npm run development

@ development C:\xampp\project-temp1 cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

14% building 36/37 modules 1 active ...stcss-loader\src\index.js??postcss0!C:\xampp\project-temp1\resources\css\app.css risk - There are upcoming breaking changes: removeDeprecatedGapUtilities, purgeLayersByDefault risk - We highly recommend opting-in to these changes now to simplify upgrading Tailwind in the future. risk - https://tailwindcss.com/docs/upcoming-changes 98% after emitting SizeLimitsPlugin

DONE Compiled successfully in 15057ms 3:02:47 p.m.

   Asset      Size   Chunks             Chunk Names

/css/app.css 4.35 MiB /js/app [emitted] /js/app /js/app.js 594 KiB /js/app [emitted] /js/app

Level 14

t's a warning, not an error. It occurs because fsevents is an optional dependency, used only when project is run on macOS environment (the package provides 'Native Access to Mac OS-X FSEvents'). Since you're running your project on Windows, fsevents is skipped as irrelevant. If you want to remove that warns, see https://github.com/npm/cli/pull/169#issuecomment-510942240

Rretzko

Level 15

Hi guys - I'm a bit late to this party but am running into the same issue on a vanilla install of Laravel 8. The login and register pages are not picking up Tailwind css although both have:

    <link rel="stylesheet" href="{{ mix('css/app.css') }}">

in their blade files which renders as

<link rel="stylesheet" href="/css/app.css">

Here are my installation steps:

/* Fresh install of Laravel 8 */
/* make sure you have the current installer */
	composer global remove laravel/installer
	composer global require laravel/installer
	laravel -v //check actual version installed
/* install laravel with jetstream (do from parent NOT root directory) */
	laravel new vanilla8 --jet
		select '0' for livewire
		select 'no' for NOT teams
	// cd into new directory
	npm install && npm run dev
/* update AppServiceProvider */
	//- add: use Illuminate\Support\Facades\Schema;
	//- add to boot():
		/**
	 	* since FJR 2020.01.03
	 	* added per https:/laravel-news.com/laravel-5-4-key-too-long-error
	 	* to correct problem with Maria db max length
	 	*
	 	* edit includes adding: use Illuminate\Support\Facades\Schema;
	 	*/
		Schema::defaultStringLength(191);

/* set .env variables */
  DB_CONNECTION=mysql
  DB_HOST=127.0.0.1
  DB_PORT=3306
  DB_DATABASE=xxxxxx
  DB_USERNAME=xxxxx
  DB_PASSWORD=xxxxx

  //for mailtrap.io
  MAIL_USERNAME=xxxxxxx
  MAIL_PASSWORD=xxxxxxx

/* create the database tables *
	php artisan migrate

The "npm install && npm run dev" ends without errors showing: Laravel Mix v6.0.10 Compiled Successfully in 5580ms with two files: /js/app.js and css/app.css.

When I open the login or register pages on my dev box, the page is rendered without css. All thoughts on what I'm doing wrong are appreciated!

wingsum

Level 1

Hihi, wonder if you have solved the problem as my tailwind css is not loading for the auth pages too.

Level 1

Yes i resolved it.. please see my previous replies above to see what was the problem.

internetbug256

Level 2

Thank you, guys!

I swear I was going to launch a rocket to the infinite with Tailwind tied up to the tail of it, when I suddenly followed the Tailwindcss.com installations steps on my supposedly "tailwind-ready" Laravel Jetstream project, and voilá! Everything started to work.

sultanwebdev

Level 1

This Problm Solved me    This code   Replace 
resources\views\layouts\app.blade.php chage
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<script src="{{ asset('js/app.js') }}" defer></script>```

Vegito2448

3 years ago

Level 1

@sultanwebdev this work for me too, thank you!

riseabove2_2

Level 3

I recently got a little stuck on this. It was working fine, but then when I imported the full tailwind.config.js file (npx tailwindcss init --full), it blew up. I realized after reading some docs in https://tailwindcss.com/docs/guides/laravel it says to configure all the paths. I forgot to update the paths back in after I imported the full config file.

Configure your template paths Add the paths to all of your template files in your tailwind.config.js file.

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

This is what my laravel with tailwind and jetstreams with teams project config file looks like:

module.exports = {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],
  presets: [],

sultanwebdev