I have this button:
<button onClick={() => removeTask(task)} class="text-xs text-red rounded-full">Delete</button>
I was hoping to see something like:
https://tailwindcss.com/docs/border-radius#pill-buttons
However, I'm not getting pill-shaped buttons:
index.css
#tailwind base;
#tailwind components;
#tailwind utilities;
tailwind.config.js
module.exports = {
content: ["./src/**/*.{html,js,jsx}"],
theme: {
extend: {},
},
plugins: [],
};
In order to see the "pill" shape, your button needs a border or background color. You could try something like:
<button class="rounded-full text-xs font-bold text-white bg-red-500 py-1 px-2">Delete</button>
Sandbox example here: https://play.tailwindcss.com/j6K2e6ZL0J
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').
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 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'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 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