Comments (2)
Would npm install tailwindcss@latest postcss@latest autoprefixer@latest --legacy-peer-deps
be sufficient?
from tall.
After --force
installing this preset package I cleared out my package.json
removed the lock file. I copied the base Laravel freshly installed package.json
and installed Tailwind as per the Laravel guide on their website.
package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"dependencies": {
"@tailwindcss/aspect-ratio": "^0.2.0",
"@tailwindcss/forms": "^0.2.1",
"@tailwindcss/typography": "^0.3.1",
"alpinejs": "^2.8.0",
"autoprefixer": "^10.2.1",
"axios": "^0.21",
"laravel-mix": "^6.0.0-beta.14",
"lodash": "^4.17.19",
"postcss": "^8.2.3",
"tailwindcss": "^2.0.2"
},
"name": "appname"
}
webpack.mix.js
const mix = require("laravel-mix");
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js("resources/js/app.js", "public/js")
.postCss("resources/css/app.css", "public/css", [
require("tailwindcss"),
])
.sourceMaps();
if (mix.inProduction()) {
mix.version();
}
tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
},
},
},
variants: {},
purge: {
content: [
'./app/**/*.php',
'./resources/**/*.html',
'./resources/**/*.js',
'./resources/**/*.jsx',
'./resources/**/*.ts',
'./resources/**/*.tsx',
'./resources/**/*.php',
'./resources/**/*.vue',
'./resources/**/*.twig',
],
options: {
defaultExtractor: (content) => content.match(/[\w-/.:]+(?<!:)/g) || [],
whitelistPatterns: [/-active$/, /-enter$/, /-leave-to$/, /show$/],
},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
require('@tailwindcss/aspect-ratio'),
],
};
base.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@hasSection('title')
<title>@yield('title') - {{ config('app.name') }}</title>
@else
<title>{{ config('app.name') }}</title>
@endif
<!-- Favicon -->
<link rel="shortcut icon" href="{{ url(asset('favicon.ico')) }}">
<!-- Fonts -->
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
@livewireStyles
<!-- Scripts -->
<script src="{{ url(mix('js/app.js')) }}" defer></script>
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
@yield('body')
@livewireScripts
</body>
</html>
Everything I kept the same.
from tall.
Related Issues (20)
- Email Verified At? HOT 2
- Updating to Laravel 9 and PHP 8.1 HOT 2
- update Tailwind version HOT 2
- I updated all packages in my Laravel and it's still Tailwind 2. HOT 3
- Fresh install still has Tailwind v2 HOT 3
- Presets with laravel/ui in a laravel 9 jetstream project? HOT 1
- dist folder missing? HOT 1
- Broken!! after Laravel 9.19 update due to Vite I guess. HOT 7
- Code didn’t merged HOT 2
- Translating Reset Email Notification
- Where is the logout endpoint? HOT 1
- Upgrade to latest dependencies specially Livewire HOT 2
- Livewire component not found after initial setup HOT 9
- New install not working (postcss incorrectly configured) HOT 3
- composer require livewire/livewire laravel-frontend-presets/tall HOT 2
- AlpineJS initialized twice in livewire v3 HOT 3
- New Laravel version problem HOT 2
- New Project startup
- livewire HOT 2
- add an apline plug in before the apline load
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tall.