tailwind-css

TailwindCSS: disabled variant not working

由 扶醉桌前 提交于 2021-02-20 19:19:48
问题 I am trying to use disabled variant in tailiwnd, but it does not seem to work. I do not know what to do. I want to change button apperance if it is disabled, I have read the documentation and it says 'disabled' variant in not enabled by default. So I modify my tailwind.config.js and now it looks like this: module.exports = { purge: [], theme: { extend: {}, }, variants: { extend: { opacity: ['disabled'] } }, plugins: [], } I have this code in my page, both buttons look the same: <div class=

How to use Tailwind CSS with Next.js Image

由 余生颓废 提交于 2021-02-20 19:15:45
问题 I am trying to use Tailwind CSS in an Next.js project but I cant't use my Tailwind classes with Next.js Image component. Here's my code: <Image src={img.img} alt="Picture of the author" width="200" height="200" className="bg-mint text-mint fill-current" ></Image> I want to use Tailwind classes instead of the height and width property of the Next.js Image. But I can't because it throws me an error. Also, unsized property throws another error saying it's deprecated. Is there any solution? Here

Laravel Snappy: TailwindCSS not loading completely

由 梦想与她 提交于 2021-02-11 12:26:40
问题 I am using Laravel (8 Jetstream) Snappy to print quite a colorful PDF from a blade view with TailwindCSS v2. However, the blade view is not the same looking in the generated PDF. First of all, nothing worked if I had the following call to the CSS file: <link href="{{ asset('css/app.css') }}" rel="stylesheet"> So I changed asset() for public_path() . Here is the whole blade view: <!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta

Laravel Snappy: TailwindCSS not loading completely

由 有些话、适合烂在心里 提交于 2021-02-11 12:25:29
问题 I am using Laravel (8 Jetstream) Snappy to print quite a colorful PDF from a blade view with TailwindCSS v2. However, the blade view is not the same looking in the generated PDF. First of all, nothing worked if I had the following call to the CSS file: <link href="{{ asset('css/app.css') }}" rel="stylesheet"> So I changed asset() for public_path() . Here is the whole blade view: <!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta

Tailwind css purge removes all dark classes

由 只愿长相守 提交于 2021-02-11 06:58:21
问题 I have a pretty simple project which uses a couple of colours extended to the theme. When I enable purging in my tailwind.config.js file, everything is purged as they should, but all of my dark classes get purged too. Does anyone have the same problem? I found an issue about this on tailwind's git as well: https://github.com/tailwindlabs/tailwindcss/discussions/2793 My resources are located in [PROJECT FOLDER] -resources -js -components Login.Vue I don't know if it's worth mentioning, but I

How to add a scroll event to a header in Gatsby

由 倾然丶 夕夏残阳落幕 提交于 2021-02-11 06:51:12
问题 Summarize the problem The goal is for the styling of the header/navbar to change as the viewer scrolls down the page. The header is already sticky/fixed in place, but I want the background/text color to change once the user scrolls down. All other components are adhering to the styling that I want so far, but trying to figure out this header has really been confusing for me. Describe what you've tried I tried to use a hook that I found online here https://www.ibrahima-ndaw.com/blog/build-a

Tailwind CSS how to code pixel perfect design

由 感情迁移 提交于 2021-02-07 19:15:28
问题 Just started to use https://tailwindcss.com And can't figure out how to code pixel perfect design only with tailwind classes. Simple example, I need padding-left 22px but closest tailwind class is pl-6 and pl-8 which is 24px and 32px respectively. So at the end of the day, I have a bunch of tailwind classes + 1 custom where I make arrangements this defeats the purpose of this framework "utilities first". 回答1: Ok got it, I need to edit tailwind.config.js and set custom sizes there. For example

Tailwind CSS how to code pixel perfect design

由 吃可爱长大的小学妹 提交于 2021-02-07 19:09:28
问题 Just started to use https://tailwindcss.com And can't figure out how to code pixel perfect design only with tailwind classes. Simple example, I need padding-left 22px but closest tailwind class is pl-6 and pl-8 which is 24px and 32px respectively. So at the end of the day, I have a bunch of tailwind classes + 1 custom where I make arrangements this defeats the purpose of this framework "utilities first". 回答1: Ok got it, I need to edit tailwind.config.js and set custom sizes there. For example

Tailwind CSS how to code pixel perfect design

由 元气小坏坏 提交于 2021-02-07 19:07:40
问题 Just started to use https://tailwindcss.com And can't figure out how to code pixel perfect design only with tailwind classes. Simple example, I need padding-left 22px but closest tailwind class is pl-6 and pl-8 which is 24px and 32px respectively. So at the end of the day, I have a bunch of tailwind classes + 1 custom where I make arrangements this defeats the purpose of this framework "utilities first". 回答1: Ok got it, I need to edit tailwind.config.js and set custom sizes there. For example

Image is squeezed in flex

由 不问归期 提交于 2021-01-29 10:13:39
问题 The first Image is squeezed in a flex layout, I'm assuming this must be due to the long paragraph in the right column, but not sure what's causing it. How to fix this so that image is not squeezed and the right column should grow to take remaining space? <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> <div class="flex p-4"> <div class="border"> <img class="w-8 h-8 rounded-full" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2
订阅 tailwind-css