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.
Related
Question:
I'd like to use a plugin (daisyUI) for TailwindCSS in one of my Svelte components. It looks like style information leaks from this component and affects the entire site. How can I avoid this?
I don't think this is related to daisyUI specifically.
Below I'm describing a minimal reproducible example based on sveltekit. But the problem is not related to sveltekit. I'm encountering this in the development of a webextension which doesn't use sveltekit. The sveltekit setup is only to make the smallest possible demonstration for this question.
To illustrate the problem, I've set up a sveltekit skeleton project, then added one single additional svelte component which uses Tailwind. When I add the plugin, the background color of my page turns from white to gray. I don't understand how this can happen, as far as I can see, I'm only using Tailwind within that component. But the style seems to leak.
Minimal example on github:
Fastest way to reproduce:
git clone git#github.com:lhk/minimum_example.git
cd minimum_example
npm install
npm run dev -- -- open
Now you can edit tailwind.config.cjs and add/remove the plugin:
plugins: [
//require("daisyui")
],
Step-by-step explanation
I'd like to use Svelte together with Tailwind and DaisyUI.
Here's a minimal project setup
# choose the skeleton project, typescript syntax and no to everything else
npm create svelte#latest minimum_example
cd minimum_example
npm install
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init tailwind.config.cjs -p
npm i --save-dev daisyui
Now edit tailwind.config.cjs:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{html,js,svelte,ts}'], theme: {
extend: {},
},
plugins: [
//require("daisyui")
],
}
Add a new Svelte component under src/components/Problem.svelte:
<p class="bg-blue-700">Using Tailwind class</p>
<style lang="postcss">
#tailwind base;
#tailwind components;
#tailwind utilities;
</style>
And include it in src/routes/+page.svelte:
<script lang="ts">
import Problem from "./../components/Problem.svelte";
</script>
<h1>Welcome to SvelteKit</h1>
<p>Visit kit.svelte.dev to read the documentation</p>
<Problem></Problem>
You can run the project with
npm run dev -- -- open
If you open the website you'll see the sveltekit skeleton app, plus one paragraph with a blue background (this is my test that Tailwind is working). Now you can uncomment the plugin in tailwind.config.cjs. The background of the page will turn gray.
I think this is a theme that somehow leaks from the Tailwind plugin to the entire site.
The way you use tailwind with svelte is quite wrong. The tldr answer is remove #tailwind directives and use #apply instead.
<p class="my-element">Using Tailwind class</p>
<style lang="postcss">
.my-element {
#apply bg-blue-700;
}
</style>
The way how svelte scopes styles is by using a unique class name alongside your custom selector, e.g. .my-element becomes .my-element.svelte-x57u2q. This also means you must use a selector so that this scoping mechanism can kick in.
But with vanilla tailwind, those builtin class names have to be global in order to be useful, in other word “leaked”. This is by design, not bug.
So if you want to use tailwind but also leverage svelte’s scoped style, #apply is the only solution.
The official doc has a section titled Using #apply with per-component CSS that reveals more technical details, I think it’s worth reading.
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'm trying to make tailwindcss and scss work together, but I have some issues. I've tried 2 options
1 - rails new app_name -c tailwind - works fine, but I cannot use nested selectors, such as
p {
h1.name {
#apply text-9xl;
}
}
2 - rails new app_name -c postcss - works almost fine, I can use nested selectors with my postcss config
module.exports = {
plugins: [
require('tailwindcss'),
require('tailwindcss/nesting'),
require('autoprefixer')
]
}
but I cannot use #import statement wit taiwindcss code (basic CSS code works fine).
application.scss
#tailwind base;
#tailwind components;
#tailwind utilities;
#import "external";
external.scss
h1 {
#apply text-9xl;
}
body {
background: red;
}
In this example body is read, but text-9xl isn't applied to h1. How to fix it?
PS: I use ruby on rails 7.0.1 with cssbundling-rails gem
It was discussed a week ago in this issue.
For now if both Tailwind and PostCSS are required,
then you'll need the whole Node enchilada
as DHH stated in the discussion. Or, you can use this hack that is based on extra pre-compilation step of joining all css files into one.
Or, you can wait until this step gets into tailwindcss-rails gem.
It also worth noting that #apply is not recommend for general purposes in tailwind. As stated in the docs:
Whatever you do, don’t use #apply just to make things look “cleaner”. Yes, HTML templates littered with Tailwind classes are kind of ugly. Making changes in a project that has tons of custom CSS is worse.
If you start using #apply for everything, you are basically just
writing CSS again and throwing away all of the workflow and
maintainability advantages Tailwind gives you, for example:
Maybe, there is no actual need for all these tricks just for the sake of #apply.
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.
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