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
Related
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 am using tailwind classes and below is my code. some people suggested to use classNames so used that as well, so similar code in both the newer and older format
const backgroundColor = disabled ? "bg-secondary-500" : "bg-green-700";
className={classNames(
"w-20 my-2 p-2 text-white rounded capitalize hover:ease-in hover:scale-110 hover:duration-200",
customClass,
backgroundColor,
{ "pointer-events-none": true }
)}
className={`w-20 my-2 p-2 text-white bg-green-700 rounded capitalize
hover:ease-in hover:scale-110 hover:duration-200
${disabled ? "pointer-events-none bg-secondary-500" : ""}
${customClass}`}
so in my customClass I have "w-60". but "w-20" is only getting applied. even it is happening for "bg-green-700" and I wanted it to be "bg-secondary-500" for disabled: true
so my disabled is coming as true and pointer-event-none is getting applied but secondary class is overridden by green class
I checked the DOM and both the bg class and both the width classes are available in the below order
<button class="w-20 my-2 p-2 text-white bg-green-700 rounded capitalize
hover:ease-in hover:scale-110 hover:duration-200 w-60
bg-secondary-500 pointer-events-none">View Docs
</button>
so if anyone has any idea this is happening, please help
For merging Tailwind classes use https://github.com/dcastil/tailwind-merge instead of classNames
import { twMerge } from 'tailwind-merge'
// ...
className={twMerge(
"w-20 my-2 p-2 text-white bg-green-700 rounded capitalize hover:ease-in hover:scale-110 hover:duration-200",
disabled && "pointer-events-none bg-secondary-500",
customClass
)}
Here if I understood correctly , you want bg-secondary-500 when button is disabled. This can be done by this
className={`w-20 my-2 p-2 text-white rounded capitalize
hover:ease-in hover:scale-110 hover:duration-200
${disabled ? "pointer-events-none bg-secondary-500" : "bg-green-500 pointer-events-auto"}
`}
However you need to add any condtion if you want to change from w-20 to w-60. Else simply use w-60.
how can i use tailwindcss properties directly in style of html property?
function App() {
return (
<div style={'bg-gray-400 w-full h-screen p-10'}>
<SideMenu />
</div>
);
}
export default App;
the above example is what i tried but style={'bg-gray-400 w-full h-screen p-10'} no works, i would like to use it inside style props or any js custom component to inject/modify the html.
Note: i know normally we use className to use tailwind css properties, but there are certains use cases when we have to use style properties to add css . framer-motion's variants is an example.
You should be able to put the tailwind styles as a class, they don't need to be in the style tag. If it's not working I would make a whitelist somewhere that they can be compiled before this code executes.
<div class='bg-gray-400 w-full h-screen p-10'>
<SideMenu />
</div>
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.
I need ur guys help how to change BG color of radio button here's my code.
<input type="radio" className="form-radio h-6 w-6 checked:bg-white text-green-500 p-3 my-4" name="radio" value="1" />
the output still the same as default radio button. enter image description here
I had a similar issue: I was able to change the background color of my input radio, but on iOS Safari it remained blue when it was selected.
The correct mix of TailwindCSS classes to make it with the wished color everywhere:
<label class="ml-3 mb-1 block">
<input type="radio" class="checked:bg-emerald-400 checked:hover:bg-emerald-400 checked:active:bg-emerald-400 checked:focus:bg-emerald-400 focus:bg-emerald-400 focus:outline-none focus:ring-1 focus:ring-emerald-400" name="radio" checked />
<span>Hello</span>
</label>
See the demo there: https://play.tailwindcss.com/LNjVfTqF29
You have to use #tailwindcss/forms - a plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.
Install the plugin from npm:
# Using npm
npm install #tailwindcss/forms
# Using Yarn
yarn add #tailwindcss/forms
Add the plugin to your tailwind.config.js file:
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('#tailwindcss/forms'),
// ...
],
}
Then you can use Tailwind utility classes:
<input type="radio" class="h-6 w-6 checked:bg-green-500 text-green-500 p-3 my-4" name="radio" value="1" />
https://play.tailwindcss.com/6oxQ5F0cXT
The solution described is fully compatible with Tailwind v3.0 - according to official docs:
All of our first-party plugins have been updated for compatibility with v3.0
Use :checked property to achieve this.
input[type="radio"]:checked {
background-color: #your-color
}
Check out a custom radio button design in codepen.
it's simple use Tailwind's text color utilities example "text-indigo-600", You can customize the background color of a radio button when it's checked by using Tailwind's text color utilities, like text-indigo-600
example :
<label class="inline-flex items-center">
<input type="radio" class="form-radio text-indigo-600" name="radio-colors" value="1" checked>
<span class="ml-2">Option 1</span>
</label>
Reference : https://tailwindcss-custom-forms.netlify.app/