#### Category : tailwind-css

I have made a config file in Laravel (Please pull me up if this is not an appropriate use case for config files): <?php return array( ‘nav’ => array( ‘bg-color’ => ‘text-red-500′, ), ); I’m am using this variable in my blade template: <?php $navConfigs = Config::get(‘theme.nav’); ?> <nav class={{$navConfigs[bg-color]}}> ….</nav> Now, This sometimes works ..

I know this question gets asked often, I already googled a lot but did not find a solution. I am trying to place my footer at the bottom of the page all the time, so even when not enough content is in the page. Here is my app.blade.php code: (I shortened it a bit) <!DOCTYPE ..

I have a nuxt project with tailwindcss and want to add it into Laravel Project Laravel 8 Nuxt 2 Tailwindcss 3 Sourc..

I’m trying to install Tailwind CSS v2.0 into a clean Laravel install, but it is not installing complete css properties like .p-2 and other properties i am following official installation https://tailwindcss.com/docs/guides/laravel but still it is not Sourc..

I’m quite new, I need help. https://github.com/tailwindlabs/tailwindcss-aspect-ratio I have a laravel 8 project in production. I have installed this package and in local it works fine, but when I upload it to production it doesn’t work. This package requires the installation of a plugin in the tailwind.config.js file. const defaultTheme = require(‘tailwindcss/defaultTheme’); module.exports = { ..

So, I’m creating a project using laravel and tailwind. After using the paginate() method and then this code in the view @if ($posts->count()) @foreach ($posts as $post) <div class="mb-4"> <a class="font-bold" href="">{{$post->user->name }}</a> <span class="text-gray-600 text-sm">{{ $post->created_at->diffForHumans() }}</span> <p class="mb-2">{{$post->description }}</p> </div> @endforeach {{ $posts->links() }} (this line to create the link to .. Read more I cannot set background color of my tags. Website Image I don’t know what is the problem, cause classes like "justify-center" or "items-center" are working. Here is the code. <body class="bg-white"> <nav class="p-6 bg-gray-900 flex justify-between"> <ul class="flex items-center"> <li> <a href="" class="p-3">Home</a> </li> <li> <a href="" class="p-3">Dashboard</a> </li> <li> <a href="" class="p-3">Post</a> </li> </ul> .. Read more I’m writing a Laravel app with tailwind 3 and I would like to use two local fonts. But I’m having some truble. The first one is, if, my directory is right. in my app.css I added: @layer base { @font-face { font-family: ‘Noto Sans’, sans-serif; font-weight: 500; src: url(/fonts/noto-sans/NotoSans-Regular.woff2) format("woff2"); } The font is located .. Read more straight to the point. so what i want to do is do optimization for tailwind css which is not being used. I’m using gulp for process, and I’m having problems when adding gulp-purgess for the dev dependency when running gulp it only has an error like the picture below without any other error signs gulp .. Read more Everytime I try to run npm run dev or npm run watch, tailwind keeps purging unused styles in my local environment. webpack.mix.js const mix = require(‘laravel-mix’); mix.js(‘resources/js/app.js’, ‘public/js’).vue() .postCss(‘resources/css/app.css’, ‘public/css’, [ require(‘tailwindcss’), require(‘autoprefixer’), ]); tailwind.config.js module.exports = { content: [ ‘./resources/views/**/*.blade.php’, ‘./resources/js/**/*.vue’, ], theme: { extend: {}, }, plugins: [], } "tailwindcss": "^3.0.7" Sourc.. Read more hello guys how can get the last grid, i dont know the number to get images can be more than 3 least 5, i want to make the last grid image full using tailwind css <div class="grid grid-cols-2 gap-2 mx-auto"> @foreach ($post->images as $image ) <div class="w-full"> <img src="{{ asset(‘/storage/’ .$image->filename) }}" alt="" ..

I am trying to upgrade tailwind to version 3 in my Laravel application. I followed the installation as instructed in https://tailwindcss.com/docs/upgrade-guide#upgrade-packages npm install -D [email protected] [email protected] [email protected] This worked fine. But when I run npm run dev I get this error: ERROR in ./resources/assets/css/tailwindcore.css Module build failed (from ./node_modules/css-loader/index.js): ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js): ..

I am using Tailwind CSS version 2.0.2 in a Laravel 8.44.0 project. I am simply just trying to add some styling to my active menu tabs. Here are my variants in tailwind.config.js: variants: { extend: { opacity: [‘disabled’], backgroundColor: [‘active’], borderColor: [‘active’], }, }, then on my page I have links that I want to ..

I’m using the larastarters kit (https://github.com/LaravelDaily/Larastarters) as a side project to practice with Intertia, Vue and tailwindcss. I’d like to set dark mode if the user clicks on a button starting with the default media preference. I use Vuex to read the state from localstorage, everything seems to work, I can successfully set the class ..

I’m trying to align one omg with text, but the tag <p> break the line. I want to do something like this But my code just do this , soo that’s my code: <div class="mb-10 mx-auto w-full max-w-sm fixed top-4 left-6 inline-block"> <div > <a href=""> <img src="../Assets/Img/logo.svg" class="h-10 w-10" alt=""> <div class="space-y-2 text-left"> <p ..

i`m begginer and i want to do a form with one password label, but in the password label I want to add a text with a like like that, but when I put something in my code nothing happens. That’s my password label <BreezeLabel for="password" value="Password" /> <BreezeInput id="password" type="password" class="mt-1 block w-full" v-model="form.password" required ..

I want to create a <hr> divider using Tailwind CSS, but I can’t find anything like this example in the documentation. Can someone help me? I’m a beginner in Tailwind CSS. Sourc..

background image doesn’t appear, the image path is correct, I test it with it is worked >> <div class="flex items-end justify-end w-full h-56" style="background-image: {{url("/storage/images/services/".$order->image)}}"> <a href="{{route(‘services.details’,$order)}}"> <button class="p-2 mx-5 -mb-4 text-white bg-blue-600 rounded-full hover:bg-blue-500 focus:outline-none focus:bg-blue-500"> <svg class="w-5 h-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"> <path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 ..

I’m new to the subject, I have a dropdown that fetches data from a table in the database, when I select another option and save, it doesn’t update the column in the database and don’t give me any error, remembered that it updates the other columns except this one My Index: <div class="form-group mb-6"> <label ..

I’m new to the subject, I have a dropdown that fetches data from a table in the database, when I select another option and save, give me: Integrity constraint violation: 1048 Column ‘department_id’ cannot be null (SQL: update users set department_id = ?, users.updated_at = 2021-11-25 09:41:43 where id = 1) My Index: <div class="form-group ..

I have three Select DropDowns. I am adding the list to the first one on load. The lists for the others are added based on the selection of their previous ones. If I don’t add the list for the first one the 3 select have the same width, but on adding the list to the ..

I was looking through the implementation of Laravel Breeze to see how they built the front end. I understand everything in the blade file except for a few things which have syntax I don’t understand. Within navigation.blade.php you can find the following: <button @click="open = !open" class…> <div :class="{‘block’:open, ‘hidden’: ! open}" As for the ..