I am trying to simply add a background image but I guess that the path is wrong. I tried changing the paths but none of them worked. Am I missing something?
My HTML:
<div class="w-1/3 flex flex-col p-2 bg-wave rounded-md m-2 mb-2">
<!--some code here-->
</div>
My tailwind.config.js file:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
'./components/**/*.{html,js}',
'./pages/**/*.{html,js}',
'./index.html',
'./src/**/*.js',
],
theme: {
extend: {
backgroundImage:{
'wave':"url:('..public/waves.png')"
}
},
},
plugins: [],
}
My structure:
public
output.css
waves.png
index.html
tailwind.config.js
You should change url:('..public/waves.png') to url:('/public/waves.png').
Related
I want to make a responsive web site using Tailwind CSS and Next.js, but I can't apply my custom responsive utility classes. I added my custom breakpoints in tailwind.config.js.
Other media queries are working fine.
I designated w-[600px] in max-1280px and w-[400px] in max-768, but I can't apply max-768 and another media query only applied max-1280px.
import React from 'react';
import profile from '../../assets/images/me.jpg';
import Image from 'next/image';
import Link from 'next/link';
import { aboutContent } from '../../data/aboutContent';
const about = () => {
return (
<div className='animate-fade-in-up'>
<h1 className='text-5xl font-appleSemiBold laptopM:text-center laptopM:underline laptopM:mb-12 tablet:text-4xl'>
About Me
</h1>
<div className='border-2 w-40 ml-[142px] mb-12 laptopM:hidden'></div>
<div className='flex flex-row justify-between items-center font-appleRegular laptopM:flex-col laptopM:gap-10'>
<Image
className='w-[600px] tablet:w-[400px]'
src={profile}
alt='Picture of me'
/>
<div className='w-6/12 laptopM:w-[600px] tablet:w-[400px]'>
<div className='text-2xl mb-8 tablet:text-xl'>
<p>test</p>
<p>
test
</p>
</div>
</div>
</div>
<div className='font-regular'></div>
</div>
);
};
export default about;
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
'./pages/**/*.{js,jsx,ts,tsx}',
'./components/**/*.{js,jsx,ts,tsx}',
],
theme: {
extend: {
screens: {
mobileS: { max: '320px' },
mobileM: { max: '375px' },
mobileL: { max: '425px' },
tablet: { max: '768px' },
laptop: { max: '1024px' },
laptopM: { max: '1280px' },
laptopL: { max: '1440px' },
},
},
plugins: [],
};
I am trying to change the color of the text of my p tag but for some reason it is not working. I am very new to coding so any advice would help.
import React from 'react'
import { SocialIcon } from 'react-social-icons';
type Props = {}
export default function Header({}: Props) {
return (
<header className="sticky top-0 flex items-start justify-between max-w-7xl mx-auto z-20 xl:items-center">
<div className="flex flex-row items-center">
{/* Social Icons */}
<SocialIcon
url="https://"
fgColor="gray"
bgColor="transparent"
/>
<SocialIcon
url="https://"
fgColor="gray"
bgColor="transparent"
/>
</div>
<div className="flex flex-row items-center text-gray-300 cursor-pointer">
<SocialIcon
className="cursor-pointer"
network="email"
fgColor="gray"
bgColor="transparent"
/>
<p className="text-gray-400">Why wont this work</p>
</div>
</header>
);
}
**tailwind.config.js**
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./compnents/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
the line of code Why wont this work does not do anything and simply leaves the text black
I honestly have no idea what to do here. I thought the other div classNames might be affecting the p tag somehow so I tried deleting them but that didn't work either. Below I attached an image of it as proof.
enter image description here
Maybe your tailwind.confing.js is not correct or something wrong.
Tailwind Css supplies the public document.
please check here.
https://tailwindcss.com/docs/customizing-colors
For example, can you set your customize color on theme.extend.colors in tailwind.config.js ?
you can customize for what you expect.
Here is sample.
tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
gray: {
400: '#303030', // custom
},
}
},
},
}
Please rebuild your app after changing that config at last.
try it.
Image
Hi everyone, I have error in css file, with custorm tailwind class. How to fix it?
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{html,ts}'],
theme: {
extend: {},
},
plugins: [],
}
Image
If I delete focus:shadow-outline code, it's begin working
shadow-outline is a custom class.
You must first define it before using it like this:
#layer components {
.shadow-outline {
#apply w-auto /*some classes*/;
}
.button {
#apply block uppercase mx-auto shadow bg-indigo-800 hover:bg-indigo-700 focus:shadow-outline focus:outline-none text-white text-xs py-3 px-10 rounded;
}
}
I'm using TailwindCSS for my project, I want to set a default border color, for the normal theme I did this via:
module.exports = {
mode: "jit",
purge: ["{pages,app}/**/*.{jsx,tsx}", "node_modules/react-toastify/**"],
darkMode: "media",
theme: {
extend: {
borderColor: (theme) => ({
DEFAULT: theme("colors.gray.100"), // Light theme default border color
dark: {
DEFAULT: theme("colors.gray.800"), // Dark theme default border color NOT WORKING
},
}),
// ...
}
For the light theme, it is working fine, however, for the dark theme, I cannot seem to find a way to apply a default value, any ideas of how to make this work?
Thanks a lot!
I figure out a way, hope it helps.
The tailwind suggests that we make use of index.css instead of configuring in tailwind.config.js
As mentioned in https://tailwindcss.com/docs/functions-and-directives
So the code goes like:
tailwind.config.js
const colors = require("tailwindcss/colors");
module.exports = {
mode: "jit",
darkMode: "media",
content: ["./src/**/*.{js,jsx}", "./public/index.html"],
theme: {
extend: {
colors: {
gray: colors.gray,
light: {
primary: colors.orange,
},
dark: {
primary: colors.green,
},
},
/* Add any default values here */
/* borderWidth: {
DEFAULT: "4px",
},*/
},
},
plugins: [],
};
index.css
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer base {
/* Can directly apply colors : hard coded values for light and dark */
.bg-color {
#apply bg-white dark:bg-black;
}
/* Can use custom color defined in the tailwind.config.css file */
.bg-text {
#apply text-light-primary-800 dark:text-dark-primary-500;
}
/* This is how you apply the border-color for both light and dark mode */
.border-color {
#apply border-black dark:border-white;
}
}
DarkMode.js
import React from "react";
const DarkMode = () => {
return (
<div className=" min-h-screen min-w-full bg-color">
<div className="border-color border-4 bg-text font-bold">
Hello
</div>
</div>
);
};
export default DarkMode;
In light theme:
In dark theme:
For your desired border-color change the border-color property as shown below.
.border-color {
#apply border-gray-100 dark:border-gray-800;
}
I've used this approach and it works pretty well.
#layer components {
.border,
.border-r,
.border-l,
.border-t,
.border-b,
.border-x,
.border-y {
#apply dark:border-dark-600;
}
}
Simply use
#layer base {
*,
::before,
::after {
#apply dark:border-gray-600;
}
}
Because Tailwind implements border-color by default. It works!
I'm using Tailwind (react/next) and struggle to change the way my scrollbar looks.
It's a single page application and I have been trying to create custom CSS to apply to the first div in my index file, like this:
<div className="no-scroll"> <<<<<<<--------- Adding custom css here
<Head>
<title>Oscar Ekstrand</title>
<link rel="icon" href="/images/favicon.ico" />
</Head>
<main className="flex flex-col no-scroll">
<section ref={heroref}>
<Hero scrollToContacts={scrollToContacts} />
</section>
<section ref={offeringref}>
<Offering />
</section>
<section ref={processref}>
<WhatIDo />
</section>
<section ref={biographyref}>
<CvBar />
</section>
<section ref={skillsetref}>
<Skillset />
</section>
</main>
<section ref={contactsref}>
<Footer />
</section>
</div>
I can get custom CSS classes to work for things like buttons, both with a "plugin-approach" and having a global style sheet. (https://play.tailwindcss.com/zQftpiBCmf)
But I can't understand how to change the look of my scrollbar.
Anyone got an idea?
Tailwind CSS doesn't provide a built-in way to customise the scrollbar styling. However, you can use the various ::-webkit-scrollbar pseudo-elements to style it.
Tailwind playground link: https://play.tailwindcss.com/5samiwyr4v.
#layer utilities {
.scrollbar::-webkit-scrollbar {
width: 20px;
height: 20px;
}
.scrollbar::-webkit-scrollbar-track {
border-radius: 100vh;
background: #f7f4ed;
}
.scrollbar::-webkit-scrollbar-thumb {
background: #e0cbcb;
border-radius: 100vh;
border: 3px solid #f6f7ed;
}
.scrollbar::-webkit-scrollbar-thumb:hover {
background: #c0a0b9;
}
}
yarn add -D tailwind-scrollbar
or
npm install --save-dev tailwind-scrollbar
then
plugins: [
// ...
require('tailwind-scrollbar'),
],
sample
<div class="h-32 scrollbar scrollbar-thumb-gray-900 scrollbar-track-gray-100">
<div class="h-64"></div>
</div>
variants
variants: {
// ...
scrollbar: ['dark']
}
FOR SOME INSTANCE IF YOU WANT TO CHANGE THE WIDTH OF THE SCROLLBAR YOU CAN CUSTOME IN YOUR tailwind.css
#layer utilities {
.scrollbar-medium::-webkit-scrollbar {
width: 12px;
}
}
then
<div class="h-32 scrollbar scrollbar-thumb-gray-900 scrollbar-track-gray-100 scrollbar-medium">
<div class="h-64"></div>
</div>
THERE IS ONLY ONE STYLE FOR SCROLLBAR WHICH IS scrollbar-thin... so customize this way
I've managed to style the scrollbar with Tailwin plugin like this:
// tailwind.config.js
const plugin = require('tailwindcss/plugin');
module.exports = {
// ...
plugins: [
plugin(({ addBase, theme }) => {
addBase({
'.scrollbar': {
overflowY: 'auto',
scrollbarColor: `${theme('colors.blue.600')} ${theme('colors.blue.200')}`,
scrollbarWidth: 'thin',
},
'.scrollbar::-webkit-scrollbar': {
height: '2px',
width: '2px',
},
'.scrollbar::-webkit-scrollbar-thumb': {
backgroundColor: theme('colors.blue.600'),
},
'.scrollbar::-webkit-scrollbar-track-piece': {
backgroundColor: theme('colors.blue.200'),
},
});
}),
],
// ...
};
And use like this:
<div class="scrollbar">
<!-- content -->
</div>
/* For Firefox Browser */
.scrollbar {
scrollbar-width: thin;
scrollbar-color: #000 #fff;
}
/* For Chrome, EDGE, Opera, Others */
.scrollbar::-webkit-scrollbar {
width: 20px;
}
.scrollbar::-webkit-scrollbar-track {
background: #fff;
}
.scrollbar::-webkit-scrollbar-thumb {
background:#000;
}
TailwindCSS's doc changed scrollbar styles by scrollbar:!w-1.5 scrollbar:!h-1.5 scrollbar:bg-transparent scrollbar-track:!bg-slate-100 scrollbar-thumb:!rounded scrollbar-thumb:!bg-slate-300 scrollbar-track:!rounded, the plugin they use
/** #type {import('tailwindcss').Config} */
module.exports = {
mode: 'jit',
content: ['./src/**/*.{html,ts,tsx,js}'],
darkMode: 'media',
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [
// https://github.com/tailwindlabs/tailwindcss.com/blob/ceb07ba4d7694ef48e108e66598a20ae31cced19/tailwind.config.js#L280-L284
function ({ addVariant }) {
addVariant(
'supports-backdrop-blur',
'#supports (backdrop-filter: blur(0)) or (-webkit-backdrop-filter: blur(0))',
);
addVariant('supports-scrollbars', '#supports selector(::-webkit-scrollbar)');
addVariant('children', '& > *');
addVariant('scrollbar', '&::-webkit-scrollbar');
addVariant('scrollbar-track', '&::-webkit-scrollbar-track');
addVariant('scrollbar-thumb', '&::-webkit-scrollbar-thumb');
},
],
};
Addition to that comment : https://stackoverflow.com/a/69410151/18041352
You can add darktheme option just adding
dark:scrollbarkdark or what you want to name that.
<div className="... overflow-auto scrollbar dark:scrollbarkdark> ...
Then add this in your main css file like in that comment above.
.scrollbar::-webkit-scrollbar-track {
background: white;
}
.scrollbardark::-webkit-scrollbar-track {
background: black;
}
...
Extend Tailwind by adding your own base styles on top of Preflight, simply add them to your CSS within a #layer base directive:
//Inside styles.css
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer base {
::-webkit-scrollbar-thumb{
#apply bg-transparent shadow-sm
}
::-webkit-scrollbar{
#apply w-3 bg-transparent
}
::-webkit-scrollbar-thumb{
#apply rounded-none bg-blue-400 /*color trackbar*/
}
}
Check out the documentation [here][1]
[1]: https://tailwindcss.com/docs/preflight