So my basic tailwind stylesheet looks like this
/* Custom Styles */
#import "./spinnerStyles";
#import "./componetStyles.css";
#import "./miscStyles.css";
/* Tailwind Directives */
#tailwind base;
#tailwind components;
#tailwind utilities;
which will then output a output.css file.
in my componetStyles.css file I added some components classes .tab and .tab.tabSelected which have some default styling applied.
miscStyles.css I use more like a local css file for the current project. So I was expecting I could override the .tab and .tab.tabSelected classes default styling by making changes to them in miscStyles.css
but this doesn't seem to work. componetStyles.css seems to have priority over changes made in miscStyles.css.
So far my best solution has been to add the override css code directly under the tailwind directives. But I was hoping for a way to do this by having the override css in a separate file to keep things clean. Is there a way to do this?
Related
In my NextJS project, I've imported my css file in the top of _app.tsx like so:
import '../main.css'
I'm using Tailwind CSS with the correct content paths in the tailwind.config.js file, and the main.css file has the usual Tailwind required tags.
In development, every page works completely fine, but in production the CSS does not work on the index page. The index page is the only page in the project that is server-side rendered.
I noticed that the static css bundle is not included in the index HTML document at all, so I have no clue why NextJS is not including it on the server-side rendered pages.
Anyone know if this is fixable somehow or just a bug?
(NextJS 13.1.5)
try importing a global css module like this import '#/styles/globals.css'
then you need to add tailwind css the top of the global.css file like this
#tailwind base;
#tailwind components;
#tailwind utilities;
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.
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 want to make my navbar responsive by adding hidden sm:flex to a specific item. Meaning it'll hidden by default but show only on small screens and above. I made some debug and discover that hidden override everything even the responsive variants. Other display properties work will on responsive variants. here's my code:
className="hidden sm:flex sm:w-2/5 w-11/12 mt-4 sm:mt-0 items-center shadow-md"
Tailwind is driven by mobile first design, just like bootstrap and some other CSS frameworks. Reference: https://tailwindcss.com/docs/responsive-design/#mobile-first
That means that classes without variants will be applied to smaller screens first, and then you can add variants for bigger screens.
So, the thing that you want to achieve should be like this:
className="flex md:hidden w-2/5 md:w-11/12 mt-0 md:mt-4 items-center shadow-md"
I hope this helps!
I got the same error in a rails application. The issue was that I was importing tailwind base styles twice. Check the code below.
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
#import "tailwindcss/screens";
#tailwind base;
#tailwind components;
#tailwind utilities;
#tailwind screens;
To fix make sure you only import them once like this:
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
#import "tailwindcss/screens";
Hope this fixes your issue.
Might be probably too late but for someone looking for an answer the solution is to remove
#tailwind screens;
In my case, the guide I followed only advised me to import the following:
#tailwind base;
#tailwind components;
#tailwind utilities;
The solution for me was simple. I added the following import:
#tailwind screens;
Background: svelte^3.0.0 with tailwind^3.0.24
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