I have a project styled with tailwind and want to use react hook form, but I can't use the style, because it messes up the rest of the pages. Is there a way to import the css and use it only in the component of the react-hook-form and for the rest of the project to use tailwind?
index.css
#tailwind base;
#tailwind components;
#tailwind utilities;
link to the sandbox with the style.css I want to implement in my project: https://codesandbox.io/s/react-hook-form-form-wihtouth-phone-xjdf5n
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;
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?
When following the TailwindCSS configuration tutorial to set it up using Next.js, the .css file at the top level looks like:
#tailwind base;
#tailwind components;
#tailwind utilities;
My question is: What is this doing and how is it grabbing and utilizing the tailwind CSS files?
From the Tailwind Functions & Directives docs:
#tailwind
Use the #tailwind directive to insert Tailwind’s base, components, utilities and variants styles into your CSS.
/**
* This injects Tailwind's base styles and any base styles registered by
* plugins.
*/
#tailwind base;
/**
* This injects Tailwind's component classes and any component classes
* registered by plugins.
*/
#tailwind components;
/**
* This injects Tailwind's utility classes and any utility classes registered
* by plugins.
*/
#tailwind utilities;
/**
* Use this directive to control where Tailwind injects the hover, focus,
* responsive, dark mode, and other variants of each class.
*
* If omitted, Tailwind will append these classes to the very end of
* your stylesheet by default.
*/
#tailwind variants;
As for how they work-- it appears from the installation page where they reference leveraging these directives the next step is "Start the Tailwind CLI build process: Run the CLI tool to scan your template files for classes and build your CSS." My assumption would be that this build process is what is reading these directives and transpiling them into usable CSS for the browser to consume.
I'm learning tailwindcss recently，and I don't understand the #tailwind screens;
Offical Doc
Who can explain it or show the usage ？
In the previous release of Tailwind (v2), #tailwind screens; would generate responsive utility classes at build-time.
However, in Tailwind v3, this has been replaced by the more generic directive #tailwind variants;.
I found it in the offical repository test file.
#tailwind screens; is just a anchor where the #media style generated will be injected rather than very end of stylesheet.
#tailwind screens; is deprecated since tailwindcss v2.2 certainly. I found the changelog.
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