I'm trying to use a simple Tailwind date picker component in a svelte kit app, however the calendar popup is not appearing. I assume it has something to do with SRR. I was able to make some progress on the installation of Tailwind elements by importing the module with onMount():
import { onMount } from 'svelte';
import { browser } from '$app/env';
onMount(async() => {
if(browser) {
await import('tw-elements');
}
});
However, the calendar icon and the popup are still not rendering. (They also do not render when I include the CDN in app.html). Is there a solution?
tailwind.config.js (P.S. night wind works just fine):
module.exports = {
darkMode: "class",
content: [
'./src/**/*.{html,js,svelte,ts}',
'./node_modules/tw-elements/dist/js/**/*.js'
],
theme: {
extend: {},
},
plugins: [
require("nightwind"),
require("tw-elements/dist/plugin")
],
}
The docs are horrible, but it does work. Here's how I got it going.
In your Svelte Kit layout, import CSS for tw-elements and Font awesome. This is critical because the datepicker icon uses Font Awesome by default, and when you click the icon it opens the picker.
import 'tw-elements/dist/css/index.min.css'
import '#fortawesome/fontawesome-free/css/fontawesome.min.css'
import '#fortawesome/fontawesome-free/css/solid.css'
<div class="datepicker relative form-floating mb-3 xl:w-96">
<input type="text" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
placeholder="Select a date"/>
<label for="floatingInput" class="text-gray-700">Select a date</label>
</div>
In Svelte onMount:
// I didn't even need the if (browser) statement)
// import the library
onMount(async () => {
await import('tw-elements/dist/src/js/index.js')
})
It looks like it is using the MD Bootstrap Datepicker which is a premium feature of MDB Pro and is not free.
Related
When I've started working on my project, which is basic HTML with Tailwind CSS installed, everything worked fine. I could use all values in classes containing numbers, for example text-2xl, text-8xl, text-9xl and ml-2, mt-6 etc.
But something went wrong and now most of these values won't work. I can't use text-2xl/4xl/5xl/6xl/8xl/9xl, but text-3xl/7xl works fine, like it used to when I started working on the project. Same with margins. For example ml-1/2/3/4 wont work, but ml-5 works like it used to.
HTML:
<body class="h-screen w-screen overflow-x-clip scroll-smooth">
<div class="h-screen w-screen flex justify-center bg-gradient-to-bl from-sky-300 to-sky-500">
<div class="h-full w-full grid xl:grid-cols-2 items-center">
<div class="flex flex-col w-full h-full justify-center text-white font-slab">
<h1 class="text-7xl ml-5">Szia!</h1>
</div>
</div>
<img class="absolute w-1/4 md:w-1/12 xl:w-[4%] left-auto right-auto bottom-[5%] animate-bounce"
src="../src/scroll.png" alt="" />
</div>
</body>
tailwind.config.js
/** #type {import('tailwindcss').Config} */
module.exports = {
mode: 'jit',
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
fontFamily: {
'oswald': ['"Oswald"', 'sans-serif'],
'slab': ['"Roboto Slab"', 'serif'],
},
},
plugins: [],
}
I don't know what I did wrong or what caused this to happen.
I deleted most of the classes which included custom values, like xl:w-[4%], because I though maybe that's what was causing the problem, but as far as I noticed, nothing changed.
I also tried searching for the classes in the web inspector tab, but they aren't being applied at all.
Edit: Deleting Just-In-Time from the config file, then npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch on my folder solved the issue.
May be jit is causing the problem try deleting the jit file from the config
And try watching again using
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
On Next 13, after replacing <img for <Image, the image requests never loads.
Its a Magento image, coming from the product.
However, Magento's server never receives the GET request from next for the image.
For example:
http://localhost:3000/_next/image?url=https%3A%2F%2Fmagento2.magenteiro.com%2Fmedia%2Fcatalog%2Fproduct%2Fcache%2Fcb2ae50ad1efe9ed2d45d11fc48a28dc%2Fl%2Ft%2Flt01.jpg&w=3840&q=75/
I can decode 2 URL's from here:
https://magento2.magenteiro.com/media/catalog/product/cache/cb2ae50ad1efe9ed2d45d11fc48a28dc/l/t/lt01.jpg&w=3840&q=75
https://magento2.magenteiro.com/media/catalog/product/cache/cb2ae50ad1efe9ed2d45d11fc48a28dc/l/t/lt01.jpg
Both would load an image from the remote server, but next never got there.
Am I missing something?
# next.config.js
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
experimental: {appDir: true},
images:{
domains: ['www.floatui.com', 'magento2.magenteiro.com', 'source.unsplash.com']
}
}
module.exports = nextConfig
Part of my productList.jsx component:
{products.map((product) => (
<>
<a key={product.url_key} href={product.url_key} className="group">
<div className="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-w-7 xl:aspect-h-8">
<Image
src={product.image.url}
alt={product.image.label}
title={product.image.label}
fill={true}
className="h-full w-full object-cover object-center group-hover:opacity-75"
/>
</div>
<h3 className="mt-4 text-sm text-gray-700">{product.name}</h3>
<p className="mt-1 text-lg font-medium text-gray-900">$ {product.price_range.minimum_price.final_price.value}</p>
</a>
{product.image.url}
</>
))}
In another attempt to figure this out, I served my /public/images directory with php server, and replaced src="http://localhost:4444/produto2.jpg".
I could confirm that next called the URL, but it never finishes loading the image.
If I add unoptimized={true} forcing Image to request the original image, then it works.
It seems to be a bug on Next in some version between 13.0.0 and 13.0.2.
I started a new project and it worked. The new project was using Next 13.0.3.
So, upgrading Next.js (npm i next#13.*) solved the problem for me.
Note that by doing this, you will be changing your constraint, and newer versions of Next.js 13 may be installed on your system.
I am trying to learn Tailwind CSS and generally working better with CSS. In this case, I am trying to make my search icon appear inside of my search input field.
I found some tutorials online but they mostly use plain CSS.
Is there any simple way to achieve this using Tailwind?
import React from "react";
import { FaSearch } from "react-icons/fa";
const SearchBar = () => {
return (
<div>
<input className="bg-slate-50 hover:bg-red-200 rounded-3xl h-12 w-56" />
<FaSearch />
</div>
I also tried to wrap the input elment in a <div> and <form> tags, but none of those worked.
This should do it:
<div className='flex items-center'>
<input className='bg-slate-50 hover:bg-red-200 rounded-3xl h-12 w-56' />
<SearchIcon className='-ml-9' />
</div>
Docs:
align items | MDN
using negative margins | MDN
I have this rails reactjs app that if I put this line in the form
<input type='submit'/>
It will create for me a blue button. I have just installed Tailwind and if I input this line with tailwind class, it does not have any effect on the button design.
<input type='submit'
className='bg-red-500 text-white font-bold py-2 px-4 rounded-full'/>
Is there a way that I can override this global settings like putting !important inline in the className?
Any help would be greatly appreciated.
You can add a ! character before the class name and that should do the job
Example:
<input type='submit'
className='!bg-red-500 text-white font-bold py-2 px-4 rounded-full'/>
Docs: https://v2.tailwindcss.com/docs/just-in-time-mode#built-in-important-modifier
Yes, You can config tailwind.config.js if you add this
module.exports = {
important: true,
}
this will generate all tailwind classes as !important
read more here
I am trying to add a custom color to tailwind.config.js and use it as a background or text color but it is not taking effect. What is odd is I have added other custom color before into tailwind config, those are working fine only anything new that I try to add does not work.
Here is my tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
theme: {
extend: {
colors:{
salmon: {
th1: '#B03060',
},
tuna: {
th1: '#393B3E',
},
wildblueyonder: {
th1: '#768DAE',
},
xanadu: {
th1: '#798578',
},
napa: {
th1: '#AC9F8F',
},
cararra: {
th1: '#F6F7F4',
},
kimberly: {
th2: '#7A81A8',
},
shakespeare: {
th2: '#53A7CE',
},
jordyblue: {
th2: '#8CCBF3',
},
softpeach: {
th2: '#FAF7F6',
},
softr: {
th2: '#FAF7F6',
},
},
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
},
},
variants: {
extend: {
opacity: ['disabled'],
},
},
plugins: [require('#tailwindcss/forms')],
};
Here is my view blade file code where I am using the color(text-salmon-th1) for text in the login a href tag.
<div class="flex lg:justify-center">
<label class="bg-tuna-th1">test</label>
<a href="{{ route('login') }}"
class="inline-flex px-6 py-2 text-2xl font-semibold text-salmon-th1 transition duration-500 ease-in-out transform rounded-lg hover:bg-red-700 hover:to-red focus:shadow-outline focus:outline-none focus:ring-2 ring-offset-current ring-offset-2">#lang("Login")</a>
<a href="{{ route('register') }}"
class="inline-flex items-center text-2xl px-6 py-2 ml-4 font-semibold text-white transition duration-500 ease-in-out transform bg-red-800 rounded-lg shadow-xl hover:to-red hover:bg-red-700 hover:text-white focus:shadow-outline focus:outline-none focus:ring-2 ring-offset-current ring-offset-2">#lang("Register")</a>
</div>
I have tried clearing the cache of browser, clearing laravel view cache.
Every time I change something in the tailwind config file I have tried "npm run watch" or "npm run dev".
And I know tailwindcss is included in page because the other colors tuna, wildblueyonder e.t.c work only the new ones that I am adding including "salmon" does not work.
I have exhausted searching the reason for this.. .Any help will be greatly appreciated.
Ok , I feel stupid but I figured out why it was not working. It was because the public folder was one step above the current framework folder. And while I ran the "npm run dev" it created the public folder with app.css file inside wrong folder.
To fix this issue I had to change the code in webpack.mix.js and add the following line.
my path
/public_folder_name/
/framework_folder_name/
added this line to the webpack.mix.js file
mix.setPublicPath('../public_folder_name/');