I just installed a clean Laravel project with the Jetstream starter kit, so it also installed Tailwind CSS.
I then tried to use the sample code from Tailwind but it won't show up.
This is my simple test code from the Tailwind docs: (from https://tailwindcss.com/docs/hover-focus-and-other-states)
app.blade.php: (You can run the code snippet because this is actually what I get in my project)
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body class="font-sans antialiased">
<button class="bg-red-500 hover:bg-red-700">
Hover me
</button>
</body>
</html>this is the tailwind.config.js file:
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
mode: 'jit',
purge: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./resources/js/**/*.vue',
],
theme: {
extend: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
},
},
variants: {
extend: {
opacity: ['disabled'],
},
},
plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
};
this is the webpack.mix.js file:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
])
.webpackConfig(require('./webpack.config'));
if (mix.inProduction()) {
mix.version();
}
and this is the app.css file:
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';