This question already has an answer here:
Passing a string as a prop and using it to make a class name in Svelte
(1 answer)
Closed 22 days ago.
I've got a <div> which is toggling between translate classes like so:
<div class={`w-96 fixed top-16 bottom-0 left-0 transition-transform -translate-x-${show ? '0' : '96'}`}>
And Tailwind is just not applying this style, and I don't understand why. The class is added to the element, but not the styling.
The styling for all the other classes is added, except for -translate-x-96.
This is my app.css:
#tailwind base;
#tailwind components;
#tailwind utilities;
Tailwind v3 generates styles for classes it finds by scanning the files specified in content field in tailwind.config.js. This means that the classes should be present in the code as-is and should not be constructed by concatenation.
From https://tailwindcss.com/docs/content-configuration#class-detection-in-depth:
The way Tailwind scans your source code for classes is intentionally very simple — we don’t actually parse or execute any of your code in the language it’s written in, we just use regular expressions to extract every string that could possibly be a class name.
The fix in this case is to specify the full class name in both branches of the ternary operator:
`${show ? '-translate-x-0' : '-translate-x-96'}`
Related
I am picking up a project that was left unfinished and used semantic-ui-react for some menu components. I decided to add tailwindcss to make my life easier when styling but I'm running into a rather weird issue.
When I include these lines at the top of my main CSS file, tailwindcss works and I can style normal HTML tags perfectly fine
#tailwind base;
#tailwind components;
#tailwind utilities;
However, something goes wrong under the hood because a semantic-ui menu that was previously styled like this
Is now styled like this
It's specifically the #tailwind base; line that is the breaking change. So I can toggle between my webpage looking like pic 1 and 2 by adding and removing that line.
People don't usually use tailwind and semantic-ui together so I couldn't find anything on the internet about this. Hoping someone will know what could be going on.
My goal is to be able to use tailwindcss to add styling to components just like normal, without random overrides of default semantic-ui styling.
This is one of the Netflix pages
Compared with the class name (.checkbox) that uses a specific name, using tailwind requires adding a lot of class names (e.g. mr-1, mt-2). After many people maintain, the strings in the class name will become many.
I think this will be difficult to maintain and read. Someone has the similar experience using tailwind. How do you solve it?
TailwindCSS allows you to still add custom CSS files while using their syntax using directives. You can read about it here.
https://tailwindcss.com/docs/functions-and-directives
Instead of having to write inline code everywhere like
<div class="p-4 m-4 flex-row">
You can create directives that you can use the same as regular classes.
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer components {
.row {
#apply p-4 m-4 flex-row;
}
}
Which then allows you to write less class names
<div class="row">
I want to migrate an existing Next JS project to Tailwind CSS.
Is there a way to ensure Tailwind and Preflight/any default style only applies to specific pages? I basically need some pages to remain 100% untouched by Tailwind.
Things I've tried
Modifying the content option in tailwind.config (that only affects the classes) and doesn't stop Tailwind applying base styling
Applying global.css which has the Tailwind css conditionally (haven't been able to figure out how to do this)
Disabling preflight. You can only do this for all pages or none of them
I also have the same issue; so far I've found one solution that is more like a workaround than a solution.
First step
Install the postcss-nested plugin for postcss and then create a CSS class to scope tailwind:
.tailwind-layout {
#tailwind base;
#tailwind components;
#tailwind utilities;
}
Second step
Create a react hook to use on the target pages:
import { useEffect } from 'react';
export default function useTailwindLayout() {
useEffect(() => {
const body = document.querySelector('body');
body?.classList.add('tailwind-layout');
return () => {
body?.classList.remove('tailwind-layout');
}
}, []);
}
Third step
Use the hook on target pages components:
useTailwindLayout();
Issue
Tailwind show the following warning on console:
(2:5) Nested #tailwind rules were detected, but are not supported.
Consider using a prefix to scope Tailwind's classes:
https://tailwindcss.com/docs/configuration#prefix
But so far, everything is working fine. I didn't find any issues or unexpected behavior. If I find a better solution, I'll update this answer.
I have a project with tailwind and a (work in progress) UI library that we want to gradually migrate to.
I am importing the style on my index.css like this
#tailwind base;
#tailwind components;
#tailwind utilities;
#import '#customPackage/ui-react/dist/style.css';
the problem is, tailwind base import some style that conflict with my customPackage styles :
.ak2yjgf is a style generated by the customPackage css, while button, [type='button'], [type='reset'], [type='submit'] is by tailwind.
I know it's possible to add custom styling useing #layers base for tailwind, but this do not override the base style, it just add more. I would like to know if there is a way to override or remove the base import for buttons only.
Disabling Tailwind preflight is the closest thing that can help
module.exports = {
corePlugins: {
preflight: false,
}
}
Then add their preflight stylesheet and edit the section that's clashing with your styles.
I solved this issue by adding all of default styles inside of a .scss file within a class for example called .ql-wrapper{} and when I need somewhere to show the details that I added from a form.
I am trying to import a library of CSS classes into the responsive directive.
Animate.css contains a bunch of classes and keyframe animations from https://daneden.github.io/animate.css/
The error I get back is:
🚫 CssSyntaxError: #apply cannot be used with .fadeInRight because .fadeInRight either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .fadeInRight exists, make sure that any #import statements are being properly processed before Tailwind CSS sees your CSS, as #apply can only be used for classes in the same CSS tree.
The end goal is to render a different animation depending on the screen size in a tailwind way.
i.e.
<div className="animated tw-fadeInBottom md:tw-fadeInRight faster"></div>
The css file being built by tailwind looks something like this.
#import '../assets/css/Animate.css';
#tailwind base;
#tailwind components;
#tailwind utilities;
#responsive {
.tw-fadeIn {
#apply fadeIn
}
}
For new users coming here, I have made a simple port of Animate.css that is compatible with TailwindCSS-style animations, and hence can be directly used by the #apply,etc. directives.
Link for docs: https://github.com/ikcb/animated-tailwindcss#readme
Basic Usage
To install, run:
npm i -D animated-tailwindcss
# or
yarn add -D animated-tailwindcss
Then just wrap your config with withAnimations (and remove import of Animate.css from CSS):
const withAnimations = require('animated-tailwindcss');
module.exports = withAnimations({
// ... your config here ...
});
Other alternatives: I was able to find out a plugin tailwindcss-animatecss that does more or less the same thing except for long configuration. But it was available when this question was asked. Strangely no one pointed it out.
Now regarding the error you were getting, any class that is used by directives but is neither a part of TW core, nor injected by some plugin/configuration, must be defined under a #layer directive.
So one actually needs to do something like this (if not preferring to use any third-party package):
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer utilities {
// define your Animate.css classes here
}
// use them here or in your code