I recently updated the svelte dependencies for a project and at some point it appears that Tailwind and svelte-calendar have stopped playing well together. I've reduced it down to a very basic app as below:
<script>
import { Datepicker } from "svelte-calendar"
</script>
<Datepicker />
<style global>
#tailwind base;
#tailwind components;
#tailwind utilities;
</style>
If Tailwind's utility classes are loaded, it completely breaks the grid rendering of the calendar:
I'm using Tailwind extensively in this project and don't want to remove it. Is there a way to get it to play nicely with a third party component like this? I've tried setting utility classes as unimportant and added a prefix but it made no observable difference.
module.exports = {
important: false,
prefix: 'tw-',
}
I had the same issue.. Added the following hack to get it to work:
function fixHeight(node: HTMLElement) {
node.firstChild.firstChild.style.minHeight = '60vh';
node.querySelector('.controls').style.minHeight = '5rem';
}
<div use:fixHeight style="margin-bottom: 5rem">
<InlineCalendar
/>
</div>
Related
I am trying to use a theme from "Daisyui" which is a tailwind based css component library https://daisyui.com/. I have a next.js app where the entry point is pages/_app.tsx. From looking at examples and reading the website's documentation, it looks like the theme is passed on from the highest component to all of the inwards components.
You add daisyui to the tailwind.config.js file, Like this:
I made my tailwind.config.js file look like this:
/** #type {import('tailwindcss').Config} */
module.exports = {
//...
content: ['./pages/**/*.{js,ts,jsx,tsx}'],
plugins: [require("daisyui")],
daisyui: {
themes: true
}
}
true means that all the themes are included.
I added the theme "synthwave" to the highest level component of the next.js app which is a div tag wrapping around Component:
import '../styles/globals.css'
import type { AppProps } from 'next/app'
function MyApp({ Component, pageProps }: AppProps) {
return (
<div theme-data="synthwave">
<Component {...pageProps} />
</div>
)
}
export default MyApp
I also made a postcss.config.js file
module.exports = {
plugins: ['tailwindcss', 'autoprefixer'],
};
And I imported
#tailwind base;
#tailwind components;
#tailwind utilities;
at the top of globals.css.
This fails because the resulting webpage is just plain white.
But what's weird is when I change daisyui: { themes: true } in tailwind.config.js to daisyui: { themes: ["synthwave"] }. The webpage IS correctly themed with daisyui's synthwave:
I'm assuming that this only works because it's overriding ALL styles on every page and I don't want that. I want to be able to declare different themes on any page if I want to. So how do I correctly set the theme for the entire app in a way that I can override it on individual pages if I want?
This link is very helpful https://nextjs.org/docs/advanced-features/custom-document. You can make a file called _document.js that can update the and tags used to render a page. Just like the link says, I created a file called _document.js in pages that looks like this:
pages/_document.js:
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html data-theme="synthwave">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
Notice this piece of code <Html data-theme="synthwave">. It correctly set index.tsx to daisyui's synthwave theme.
I am trying to use #apply on my custom class in Nuxt.js 2
nuxt.config.js
export default {
buildModules: [
'#nuxtjs/tailwindcss',
],
tailwindcss: {
cssPath: '~/assets/app.css',
exposeConfig: true
}
}
assets/app.css
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer utilities {
.btn {
#apply border-2 p-2 font-bold;
}
}
in any vue-single-file or any other scss file
<style lang="scss">
.btn-lg {
#apply btn;
}
</style>
The btn class does not exist. If you're sure that btn 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
So, how to make my custom styles be seen by the Tailwind CSS before processing to make my custom classes work in #apply?
I've tried the solutions in the following questions and document
adding-custom-utilities
not able to use custom classes in #apply in scss file tailwind nextjs project?
But none of them work
I am using:
Tailwindcss 2.2.19 via #nuxtjs/tailwindcss
Nuxt.js 2.15.8
Thanks a lot for any replies!
As I mentioned in the comments, add a mode: "jit" can solve this problem.
tailwind.config.js
module.exports = {
mode: 'jit'
}
It's a good vanilla solution.
However, if you are programming the project in a virtual machine(Homestead) just like me, this could cause a error that the node can't recoginze the changings of your css/scss/sass files.
so there's another two solutions:
use pure tailwindcss instead of #nuxtjs/tailwindcss
just follow the document: Install Tailwind CSS with Nuxt.js
use plugin() in your tailwind.config.css
const plugin = require('tailwindcss/plugin')
const fs = require('fs')
module.exports = {
// ... purge, theme, variants, ...
plugins: [
plugin(function({ addUtilities, postcss }) {
const css = fs.readFileSync('./your-custom-style-file-path', 'utf-8')
addUtilities(postcss.parse(css).nodes)
}),
],
}
from github
But what's more, this solution can't recoginze the changings too. So add your css/scss/sass files in nuxt.config.js (I'm using nuxt-vite)
vite: {
plugins: [
{
name: 'watch-external', // https://stackoverflow.com/questions/63373804/rollup-watch-include-directory/63548394#63548394
async buildStart(){
const files = await fg(['assets/**/*']);
for(let file of files){
this.addWatchFile(file);
}
}
}
]
}
Just started using tailwindcss in a Next.js project.
I set it up through my CSS file, and was trying to setup some basics for headers h1, h2, ... but I like separating the logic a bit so it doesn't get too messy, so I tried to `#import './typography.css' which includes some tailwind, but it doesn't work.
Here is my base CSS file:
#tailwind base;
#tailwind components;
#tailwind utilities;
#tailwind variants;
#import './typography.css';
My typography:
h1 {
#apply text-6xl font-normal leading-normal mt-0 mb-2;
}
...
Any ideas on how I can get this to work?
Update
I've tried:
Added #layer base in my typography.css file, but receive an error: Syntax error: /typography.css "#layer base" is used but no matching #tailwind base
Also tried do it at the import layer, eg #layer base { #import("typography.css") }, that doesn't create an error but the styles aren't applied.
You need set the target layer for this to work.
Since you want to change the base html elements in your typography.css file do:
#layer base {
h1 {
#apply text-6xl font-normal leading-normal mt-0 mb-2;
}
}
More details in the documentation here: https://tailwindcss.com/docs/adding-base-styles
Based on the docs from tailwind, here is a TLDR;
Install
npm install -D postcss-import
Update your postcss.config.js
// /postcss.config.js
module.exports = {
plugins: {
"postcss-import": {}, // <= Add this
tailwindcss: {},
autoprefixer: {}
}
}
Then in your main css file where you have the imports, you need to:
rename the tailwindcss imports to from #import base; to #import "tailwindcss/base"; (same for the components and utilities
Then you need to import in the proper order. If the file is a base put it after the base import, it's a components, put it after the components
#import "tailwindcss/base"; // <= used to be `#tailwind base;`
#import "./custom-base-styles.css";
#import "tailwindcss/components"; // <= used to be `#tailwind components;`
#import "./custom-components.css";
#import "tailwindcss/utilities"; // <= used to be `#tailwind utilities;`
#import "./custom-utilities.css";
Then in your custom-base-styles.css you can:
#layer base {
h1 {
#apply text-3xl text-slate-800;
}
}
According to the docs the issue is a matter of the order of the statements. They recommend to put the #tailwind base; statement in a seperate file and import it like this:
#import "./tailwind-base-statement.css";
#import "./typography.css";
You must use postcss-import
https://tailwindcss.com/docs/adding-custom-styles#using-multiple-css-files
https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports
if you use Laravel webpack mix, add it in .postCss(....)
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'), // <------------ add postcss-import here
require('tailwindcss'),
])
used poscss and postcss-import-plugin import plugin
npm install -D postcss-import
update postcss.config.js file
module.exports = {
plugins: {
'postcss-import': {},
tailwindcss: {},
}
}
add #tailwind base; inside top of your typography.css
for more deatils you can check this link:
https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports
I found something that seems to work for me.
Basically postcss-import has its own layer system that we can use instead of tailwinds layer system.
#import 'tailwindcss/base' layer(Base);
#import './base/typography.css' layer(Base);
#import 'tailwindcss/components' layer(Components);
#import 'tailwindcss/utilities' layer(Utilities);
#layer Base {
#root {
#apply some-styles;
}
}
In postcss-import#usage it describes using layer() with #import
...
#import 'baz.css' layer(baz-layer);
...
I used uppercase layer names to avoid conflicting with tailwinds layers.
Install postcss-import as described in tailwinds article.
using-with-preprocessors#build-time-imports
Then add layer() to your imports like #import 'tailwindcss/base' layer(Base).
Also rename your #layers calls to something different than tailwinds layers.
For examples you can look any of the test fixtures with layer in the filename.
postcss-import/test/fixtures
UPDATE
The root cause of this for me was using Create React App.
Because it doesn't allow you to configure postcss.config.js.
So another solution would be to migrate to something else instead.
darekkay/create-react-app-to-vite#migration
tailwindcss.com/issues/1472
tailwindcss/guides/create-react-app
we highly recommend using Vite, Next.js, Remix, or Parcel instead of Create React App
So I started using Tailwind 2.0 in my React project and most things seem to work fine. Colors, sizing, flexbox, grid, etc. No problem with these utilities so far. But for some reason some font-size classes won't work properly. For instance, if I use text-lg, the style is applied
as you can see here.
But if I try anything bigger than that, like text-2x1 or higher, the class isn't applied.
I searched around a lot but didn't find anything that could help me.
I don't know it this helps, but that's my config file (even though it was already happening even before I made any change to it):
module.exports = {
purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
colors: {
normal: "#A8A878",
poison: "#A040A0",
psychic: "#F85888",
grass: "#78C850",
ground: "#E0C068",
ice: "#98D8D8",
fire: "#F08030",
rock: "#B8A038",
dragon: "#7038F8",
water: "#6890F0",
bug: "#A8B820",
dark: "#705848",
fighting: "#C03028",
ghost: "#705898",
steel: "#B8B8D0",
flying: "#A890F0",
electric: "#F8D030",
fairy: "#EE99AC",
noType: "lightgray",
},
},
},
variants: {
extend: {},
},
plugins: [],
};
index.css has nothing but the bare minimum for Tailwind to work:
#tailwind base;
#tailwind components;
#tailwind utilities;
Here's the repository: https://github.com/TheSirion/pokedex
Looks like you are using the wrong className, text-2x1 className is wrong instead you should use text-2xl.
For your reference, check the official Doc to see more classNames for font-size.
I am currently writing an app with svelte, sapper and tailwind. So to get tailwind working I have added this to my rollup config
svelte({
compilerOptions: {
dev,
hydratable: true,
},
preprocess: sveltePreprocess({
sourceMap: dev,
postcss: {
plugins: [
require("tailwindcss"),
require("autoprefixer"),
require("postcss-nesting"),
],
},
}),
emitCss: true,
})
All in all this works, but I am getting some issues with dynamic class names.
Writing something like this always seems to work
<div class={true ? 'class-a' : 'class-b'}>
both class-a and class-b will be included in the final emitted CSS and everything works as expected.
But when I try to add a variable class name it won't work. So imagine this:
<div class={`col-span-6`}>
It will work exactly as expected and it will get the proper styling from the css class col-span-6 in tailwind.
But if I change it to this:
<div class={`col-span-${6}`}>
Then the style won't be included.
If I on the other hand already have a DOM element with the class col-span-6 then the styling will be added to both elements.
So my guess here is that the compiler sees that the css is not used and it gets removed.
And I suppose that my question is then if there is any way to force in all the styling from tailwind? so that I can use more dynamic class names
and not sure if it is relevant but the component I have been testing this on, have this style block
<style>
#tailwind base;
#tailwind components;
#tailwind utilities;
</style>
edit: can add that I am getting a bunch of prints in the log saying that there are unused css selectors that seems to match all tailwind classes
I think it was purgeCSS (built-in in tailwind 2.0) that did not recognize the dynamic classes.
It is difficult to solve this problem for every tailwind classes, but if you don't have a lot of these you can manually safe list those classnames:
// tailwind.config.js
module.exports = {
purge: {
content: ['./src/**/*.html'],
// These options are passed through directly to PurgeCSS
options: {
// Generate col-span-1 -> 12
safelist: [...Array.from({ length: 12. }).fill('').map((_, i) => `col-span-${i + 1}`],
},
},
// ...
}
I think that when the class attribute is a variable or depends on a variable it will not used to extract style during compilation (class-${6} is not evaluated during compilation but during runtime), because svelte marks it as unused css selector because the value of that class attribute is not known when the code is compiled.
To force svelte to include your style you must mark it as global, and to do that we have two options:
<script>
// component logic goes here
</script>
div class={`class-${6}`}/>
option 1:
<style>
:global(.class-6){
// style goes here
}
</style>
option 2: this will mark all your style as global
<style global>
.class-6{
// style goes here
}
</style>
I encounter the same problem, <div class="pl-{indent*4}"> do not work in svelte.
My solution is to use inline style,
<div style="padding-left:{indent}rem">,
which is inferred from pl-1=padding-left: 0.25rem; /* 4px */.
I think it's convenient for simple class.