I am trying to make a static one page website using tailwind. I am using vscode on microsoft windows. I have followed exactly the installation instructions on https://tailwindcss.com/docs/installation and structured my two directories as /scr and /dist as shown.
The output css file is created successfully with no errors, but does not have any of the classes that tailwind advertises. It is 424 lines only and includes css that sets defaults only it seems. Does anyone know how to get tailwind to actually output the css classes that are shown on their website?
my input.css file is:
#tailwind base;
#tailwind components;
#tailwind utilities;
What am I doing wrong?
I figured out that I wasn't correctly referencing my index.html file in the tailwind.config.js file. Once I added content: ["./dist/*.{html,js}"] the problem was fixed.
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 am working on an node.js express project using EJS as template engine. I am developing this on Intellij Ultimate Edition. Intellij's tailwind css plugin is installed. I am using tailwindcss v3 as my css framework. I have followed their Get Started guide and I am using Tailwind CLI as my method of installation.
tailwind.config.js
module.exports = {
mode: 'jit',
content: ['./views/*.ejs'],
theme: {
extend: {},
},
plugins: [],
};
I am building the css like so:
npx tailwindcss -i source.css -o public/stylesheets/style.css --watch
source.css
#tailwind base;
#tailwind components;
#tailwind utilities;
So all is working fine, no issues, however I am a no error/warning in IDE kinda fellow (read OCD), and the error/warning shown in the IDE is bothering me and I want to know how to fix it OR if it is meant to be this way, then how to suppress it?
I have added a screenshot for reference. Let me know if more info is needed to debug, I'll be happy to provide them.
(Answering my own question)
So, looks like #tailwind base; is the culprit.
According to tailwind doc:
Built on top of modern-normalize, Preflight is a set of base styles for Tailwind projects that are designed to smooth over cross-browser inconsistencies and make it easier for you to work within the constraints of your design system.
Tailwind automatically injects these styles when you include #tailwind base in your CSS
Looks like this has some styles which Intellij thinks are wrong and hence shows errors/warnings. You can read more about it here.
Quick solution is to remove #tailwind base; from your source/input.css, and it seems safe to remove as long as you are fine having minor inconsistencies between browsers.
I will reconsider my decision of removing it as my app matures. Not sure if it is an IntelliJ issue or a Tailwind issue. Please advice and I can open up an issue accordingly.
EDIT:
I found a way to disable IntelliJ inspection to just one file. This solution is imo a better one than removing #tailwind base from your source.css
You can do this by opening the culprit file and going over to the inspection bubble (top right, with checkmarks, crosses etc) and then click on Highlight:None.
I have also started a discussion on the tailwindcss git repo here.
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