How do I make Tailwind styles apply to this form?
Unanswered
Dogue de Bordeaux posted this in #help-forum
Dogue de BordeauxOP
return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="email">Email:</label>
<input
className="bg-neutral-800/20 text-white"
type="email"
id="email"
name="email"
value={formData.email}
onChange={handleChange}
required
/>
</div>
<div>
<label htmlFor="message">Message:</label>
<textarea
className="bg-neutral-800/20 text-white"
id="message"
name="message"
value={formData.message}
onChange={handleChange}
required
/>
</div>
<button type="submit">Submit</button>
</form>
);62 Replies
American Chinchilla
@Dogue de Bordeaux did you figured it out
@American Chinchilla <@197794050823290880> did you figured it out
Dogue de BordeauxOP
i haven't solved it
when you say apply, do you mean no tailwind is working in your app (and just need to set that up)? or this style is being override?
@riský when you say apply, do you mean no tailwind is working in your app (and just need to set that up)? or this style is being override?
Dogue de BordeauxOP
it just appears that nothing i write in the className actually shows up in the app
other tailwind stuff works tho
just not this one
@Dogue de Bordeaux it just appears that nothing i write in the className actually shows up in the app
Interesting, does the file that this in match the paths in
content in tailwind config@riský Interesting, does the file that this in match the paths in `content` in tailwind config
Dogue de BordeauxOP
it's a bit late here so i'll check that tomorrow and let you know
we can pick this up then
for now tho thanks for replying ^-^
@riský Interesting, does the file that this in match the paths in `content` in tailwind config
Dogue de BordeauxOP
on first glance, it appears that it does
const config: Config = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
...WAIIIIIT
nope it doesn't !!
oooops lemme see what happens if i fix that
it appears to be different but not quite what i'm looking for
i'm testing if these styles are applying by trying to make the text red
the tailwind config's paths should be correct now
but this text is not turning up red
actually, figured it out
had to add a value
text-red-number
lol oh yeah that, but what about background, didnt you say that wasnt working either?
Dogue de BordeauxOP
thanks for the help -- i never would have found the tailwind config bug lmao
@riský lol oh yeah that, but what about background, didnt you say that wasnt working either?
Dogue de BordeauxOP
uuuh i might have lemme check
oh yea i did lmfao
@Dogue de Bordeaux thanks for the help -- i never would have found the tailwind config bug lmao
np, it is a pretty common issue
Dogue de BordeauxOP
background is the color of the text box, right?
should be
ohh you actually had to change content, yeah it should work now then
Dogue de BordeauxOP
my background is still invisible
lemme see if it's just a function of the color i set
oh yea that actually works too
while we're here tho i do have a follow up question @riský
if i wanted to move the Email: and Message: so it were above the text boxes
how would i go about that
i think easiest is to add "block" classname to your textarea
Dogue de BordeauxOP
gotcha
how would i do that? i'm suuuper new so i'm just figuring out the basics rn lmao
Dogue de BordeauxOP
neato
is there any way to get rid of the colon
the
:?Dogue de BordeauxOP
ya
after Email and Message
just remove it
Dogue de BordeauxOP
oh
Dogue de BordeauxOP
i was looking at the input type
LMAO
loll
Dogue de BordeauxOP
i was so confused why there was a colon
when the string said email
this is so funny
ah yeah i can get that
Dogue de BordeauxOP
nothing cooler than being new to a framework 
Dogue de BordeauxOP
i learn by throwing myself headfirst at a crazy project i have no idea how to do and figuring it out from there
so this is helping fr fr