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;
}
}
Related
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').
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.
I am learning tailwind CSS. When I cut the classes from index.html and paste it into the CSS file it throws an error. CSS file has
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer components {
.btn {
#apply inline-block px-5 py-3 rounded-lg shadow-lg bg-indigo-500 hover:bg-indigo-400 hover:-translate-y-0.5 focus:ring-indigo-500 focus:ring-opacity-50 focus:outline-none focus:ring focus:ring-offset-2 active:bg-indigo-600 transform transition text-white uppercase tracking-wider font-semibold text-sm sm:text-base
}
}
Any suggestion for this. Front UI error Image is
You have a spelling error in tailwind.config.js, itsbackgroundColor, not backgroungColor
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: { extend: {} },
variants: { extend: { backgroundColor: ["active"] } },
plugins: [],
};
i am running into some problems compiling my CSS. I create 3 custom classes in my index.css file and also use #apply for some longer classes.
#tailwind base;
#tailwind components;
#tailwind utilities;
#font-face {
font-family: "Spartan";
src: url('/fonts/static/Spartan-Bold.ttf') format("truetype");
}
#layer base {
:root {
--main: "#3a4764";
--keypad: "#232c43";
--screen: "#182034";
--key-blue: "#637097";
--key-shadow-blue: "#404e72";
--key-red: "#d03f2f";
--key-shadow-red: "#93261a";
--key: "#eae3dc";
--key-shadow: "#b4a597";
--text-dark: "#444b5a";
--text-white: "#ffffff";
}
.themeLight {
--main: "#e6e6e6";
--keypad: "#d1cccc";
--screen: "#ededed";
--key-blue: "#377f86";
--key-shadow-blue: "#1b5f65";
--key-red: "#ca5502";
--key-shadow-red: "#893901";
--key: "#e5e4e1";
--key-shadow: "#a69d91";
--text-dark: "#35352c";
--text-white: "#ffffff";
}
.themeRetro {
--main: "#160628";
--keypad: "#1d0934";
--screen: "#1d0934";
--key-blue: "#58077d";
--key-shadow-blue: "#bc15f4";
--key-red: "#00e0d1";
--key-shadow-red: "#6cf9f2";
--key: "#341c4f";
--key-shadow: "#871c9c";
--text-light: "#ffe53d";
--text-dark: "#1b2428";
--text-white: "#ffffff";
}
}
where in my css file do i write the classes which use #apply? My classes with #apply all use the color variables from my custom themes like so:
.key {
#apply w-1/5 h-1/6 flex justify-center items-center rounded-md border-b-4 pt-2 font-bold text-3xl;
}
.keyColor1 {
#apply border-skin-key-shadow bg-skin-key text-text_dark;
}
.keyColor2 {
#apply border-skin-key-shadow-blue bg-skin-key-blue text-white text-xl;
}
.keyColor3 {
#apply border-skin-key-shadow-red bg-skin-key-red text-white;
}
.toggle {
#apply bg-skin-key-red;
}
My tailwind config file:
theme: {
extend: {
backgroundColor: {
skin: {
main: "var(--main)",
keypad: "var(--keypad)",
screen: "var(--screen)",
'key-blue': "var(--key-blue)",
'key-shadow-blue': "var(--key-shadow-blue)",
'key-red': "var(--key-red)",
'key-shadow-red': "var(--key-shadow-red)",
key: "var(--key)",
'key-shadow': "var(--key-shadow)",
'text-dark': "var(--text-dark)",
'text-white': "var(--text-white)",
}
}
},
},
thanks in advance!
Figured out the problem i had some extra parantheses around the hex color codes in
:root {
--main: "#3a4764";
--keypad: "#232c43";
--screen: "#182034";
--key-blue: "#637097";
--key-shadow-blue: "#404e72";
--key-red: "#d03f2f";
--key-shadow-red: "#93261a";
--key: "#eae3dc";
--key-shadow: "#b4a597";
--text-dark: "#444b5a";
--text-white: "#ffffff";
}
--key-shadow: "#b4a597"; should be --key-shadow: #b4a597;.
I use Tailwind for my project and I would like to create classes which use tailwind existing classes. For example, my buttons currently look like this:
<button class="text-light-blue bg-white rounded-full border-solid border-2 border-light-blue py-1 px-4 box-border shadow hover:bg-blue-700 hover:text-white hover:border-blue-700">
Button
</button>
As you can see I use a lot of classes and I would like to have instead something like this:
<button class="app-btn"> Button </button>
with
#import '/node_modules/tailwindcss/utilities.css';
.app-btn {
#extend .text-light-blue;
#extend .bg-white;
...
}
but when I try to do this I have the following error:
SassError: ".app-btn" failed to #extend ".bg-white".
The selector ".bg-white" was not found.
Use "#extend .bg-white !optional" if the extend should be able to fail.
on line 4 of src/assets/styles/app-shared-style.scss
Is there a way to achieve what I'm trying to do?
Thanks
I found the solution:
You need to install postcss-import with npm install postcss-import, tweek the postcss.config.js with:
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]
}
and then you can create classes based on the lib classes with:
#import 'tailwindcss/utilities';
#import 'tailwindcss/base';
#import 'tailwindcss/components';
.app-btn {
#apply text-white;
#apply rounded-full;
#apply py-1;
#apply px-4;
#apply shadow;
&:hover {
#apply bg-blue-700;
}
}
You can just do this:
.app-btn {
#apply text-white rounded-full py-1 px-4 shadow hover:bg-blue-700.
}
if you use laravel mix
const mix = require('laravel-mix');
You need to configure your webpack.mix.js in one of the following ways
1] you can either use postCss like this
mix.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]);
2] or, you can use sass like this
mix.sass("resources/css/app.scss", "public/css").options({
postCss: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
], });
Example:
.input {
#apply p-2 text-center mb-2 border rounded focus:outline outline-2 focus:outline-blue-500;
}
.file-input {
#apply input border-none text-slate-500 leading-10 file:block md:file:inline-block file:w-full md:file:w-auto file:btn file:h-min file:border-none file:cursor-pointer file:mx-3;
}
No CSS preprocessor needed