Category : tailwind-css

I want to apply tailwind-starter-kit in my laravel 8 app and I got editor form from html-login-page/login.html file and “Sign In” page of this form has classes : <button class="bg-gray-900 text-white active:bg-gray-700 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full" type="button" style="transition: all 0.15s ease 0s;" > Sign In </button> ..

Read more

I have a logo and back-to-home button in header. logo has to be in the middle of header and button has to be at the and of header. When I try justify-between logo is at the start. Which tailwind class/classes can give me the solution? <div class="flex justify-between mt-10"> <x-app-logo mode="" classes="pb-8 w-60 justify-self-center"></x-app-logo> <a ..

Read more

In my case, I want to add more colors from the TailwindCSS Palette. The versions I’ve got now are: ├── @tailwindcss/[email protected] ├── @tailwindcss/[email protected] └── [email protected] Here is my tailwind.config.js file: tailwind.config.js const defaultTheme = require(‘tailwindcss/defaultTheme’); const colors = require(‘tailwindcss/colors’); 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’, ], theme: { extend: { ..

Read more

i try to add https://github.com/markusantonwolf/ta-gallery/ into Laravel 8 / livewire 2.5 / alpinejs 3 / tailwindcss: 2.2 app amd modifying file tailwind.config.js as it is proposed in the docs , I got a lot of syntax errors in my PHPStorm 2021.1 : https://prnt.sc/1t3z3er also I got next errors in console npm command : [email protected]:/mnt/_work_sdb8/wwwroot/lar/Hostels4J$ npm ..

Read more

I need the "Normal Price" part to look just like label+input above (Product name+field). I’m finding trouble in adding the € sign after the field. It appears like this: <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.15/tailwind.min.css” integrity=”sha512-braXHF1tCeb8MzPktmUHhrjZBSZknHvjmkUdkAbeqtIrWwCchhcpUeAf2Sq3yIq1Q1x5PlroafjceOUbIE3Q5g==” crossorigin=”anonymous” referrerpolicy=”no-referrer” /> <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.15/base.min.css” integrity=”sha512-7w16czo+3MOe00eO6LsuOsMoUyMMAqWhNS+K7uyyL+Sjw+fHDHexWCO9w0YyMID+pTDVG5sk/+vY4Hpevoatow==” crossorigin=”anonymous” referrerpolicy=”no-referrer” /> <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.15/components.css” integrity=”sha512-9BlWpvccUKhxv9Jzha/JN6P+4hrVmhka0a0tnjtuv+Ro/V8itR/f0FM28++8CiK2CQ/qXu56VzGoHpGT3dJTKg==” crossorigin=”anonymous” referrerpolicy=”no-referrer” /> <div class=”w-full gap-6″> <div style=”display: ..

Read more

I have a view welcome.blade.php with the headear like this: <!DOCTYPE html> <html lang="{{ str_replace(‘_’, ‘-‘, app()->getLocale()) }}"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Blog</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link href="{{ asset(‘css/app.css’) }}" rel="stylesheet" media="print"> <link href="{{ asset(‘css/example.css’) }}" rel="stylesheet" media="print"> <link rel="preconnect" href="https://fonts.gstatic.com"> </head> <body class="font-sans antialiased w-full"> …. I’m using tailwindcss, this page has ..

Read more

this is my controller file, validating the registration form, i have used laravel and MySQL as database using laradock as an environment public function store(Request $request) { $this->validate($request, [ ‘name’ => ‘required|max:255|distinct’, ‘username’ => ‘required|max:255′, ’email’ => ‘required|email|max:255’, ‘password’ => ‘required|same:password_confirmation’, ]); User::create([ ‘name’ => $request->name, ‘username’ => $request->username, ’email’ => $request->email, ‘password’ => Hash::make($request->password), ..

Read more

I have a Laravel Jetstream installation and use Tailwind CSS however the default colors do not work when using the tailwind components. I only want to use the default colors and not custom yet. tailwind.config.js 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’, ], theme: { extend: { ..

Read more

I’m trying to hide a div in mobile, and display flex with md screen & above, here’s my code: <div class="hidden md:flex"> <x-navbar.nav-links :href="route(‘welcome’)"> Home </x-navbar.nav-links> <x-navbar.nav-links :href="route(‘welcome’)"> Shop </x-navbar.nav-links> <x-navbar.nav-links :href="route(‘welcome’)"> About Us </x-navbar.nav-links> <x-navbar.nav-links :href="route(‘welcome’)"> Contact </x-navbar.nav-links> </div> Apparently, the div is hidden all the time whether it’s a md or sm or ..

Read more

I am working with the TALL architecture (TailwindCSS + AlpineJS + Laravel + Livewire) in a project and I want to achieve the transition specified in the question title: Fade out old text Replace text Finally fade in new text My best try so far is: <div x-show="formMode == ‘create’" class="px-4 sm:px-0" x-transition:enter="transition ease-out duration-300" ..

Read more

i am using TailWind with blade template in laravel, how can i make those card like in the bootstrap, i mean every three items in the one column : @section(‘content’) <div class="flex justify-center"> <div class="w-8/12 bg-white p-6 rounded-lg mt-10 "> @forelse($products as $product) <!– Box –> <div class="md:flex md:justify-center md:space-x-8 md:px-14"> <!– box-1 –> <div ..

Read more