I'm trying to create a package of Svelte components using the svelte packaging library (the one you can set up with npm create svelte#latest and choosing svelte library. I then add tailwind following tailwind's guide https://tailwindcss.com/docs/guides/sveltekit.
The issue is, when I run npm run build to create my package, the utility classes aren't being converted into css. Interestingly enough, any styles I add to the a style tag using the #apply syntax does.
Can anyone help explain what's going on? Is this a preprocessing issue? Am I fundamentally misunderstanding something about how tailwind works?
For more detail, here's a small repository I made to illustrate the point: https://github.com/awenzel5/sveltekit-package-tailwind
It has a component in the src/lib folder that's simply
<h1 class="text-2xl">Hello</h1>
<h1 class="small-text">World</h1>
<style lang="postcss">
.small-text{
#apply text-sm;
}
</style>
After running npm run build, this builds into
<h1 class="text-2xl">Hello</h1>
<h1 class="small-text">World</h1>
<style>
.small-text {
font-size: 0.875rem;
line-height: 1.25rem
}
</style>
As you can see, the #apply class worked and grabbed the css from tailwind, however the text-2xl class on the first h1 did not.
Any ideas are appreciated.
Related
I am relatively new to Next.js and the react ecosystem, but have been using it for a lot of my website development lately and so far have been loving it. One thing that is definitely causing some increased development time is how the styling works using SCSS, or at least my understanding of it.
I have built a number of SCSS partial files that contain different pieces of a style guide that I have used for a while - think similar to tailwind where I have predefined a large number of classes to do different things, some as simple as .flex { display: flex; } to more complex styles.
I have imported many of these partials into the globals.scss file so they would be applied everywhere, and some of the other partials are only imported into the specific files that I need them.
The issue I am running into with Next is that if I want to style a global selector, I have to add additional classes to the element. For example, if I had something like this
import styles from './component.module.scss'
export default function Component() {
return (
<div className={styles.classOne}>
<div className="container additionalClass anotherClass"></div>
</div>
);
what would be ideal is to be able to target those classes in the related scss file like so:
.classOne {
background:#000;
.additionalClass {
padding:10px;
}
}
however targeting that .additionalClass does not work, so I would have to switch the js file to be something like
import styles from './component.module.scss'
export default function Component() {
return (
<div className={styles.classOne}>
<div className={`container additionalClass anotherClass ${styles.mySpecificStyleSelector}`}></div>
</div>
);
and then target .mySpecificStyleSelector in the scss. Is this something that is by design with Next or am I missing something that could help with this scenario? I appreciate any input!
In a new project I get the strange behavior where everything works as intended, except for Outline and related: https://tailwindcss.com/docs/outline-style
The error received:
The outline class does not exist. If you're sure that outline
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.
This is in an #apply for a component eg:
.button {
#apply bg-primary hover:bg-secondary;
}
.primary {
#apply border-2 md:border-none border-primary md:border-transparent;
}
Yet this does not work:
.outline {
#apply outline outline-2 outline-offset-2 focus:outline-yellow-500;
}
To ensure this is in the same import tree, these are applied in the index.css as part of the components layer:
#layer components {
...
}
Any insights into this will be highly appreciated, as none of the references (tailwind documentation, nor their repo bugs, addresses this issue in a workable manner, each example found points to user error. Which may just be the case here, but I am yet to find the issue.
You can't apply a class to itself. outline is already defined (one of the default tailwind classes), you are trying to define and apply it again.
See the error: https://play.tailwindcss.com/cdQLeYFcNH?file=css
Error
<css input>: Circular dependency detected when using: #apply outline
Use a different custom class. Like .custom-outline: https://play.tailwindcss.com/qo8M6Zkj31
I have this css class .number in my React app which I use for numbers in a code editor. This style works perfectly locally, when I start the app with npm start. However, when deployed, this .number class gets overridden by some other .number class, which I have no idea where it comes from, it's no where in my code, and it breaks my style. Đ¢his is the style from my deployed app (pic 1). The first .number is my class, defined in index.css and this other is defined in other.sass but this file doesn't exist in my code.
The second photo describes the style used in my local app. As you can see, this style and that from other.sass do not correspond. This is the code as well:
.number {
align-items: center;
border-radius: 9999px;
display: inline-flex;
text-align: center;
vertical-align: top;
}
Do you happen to know what is the potential reason for this kind of bug, how can I debug it and how can I fix it?
This looks like some kind of bundler (webpack, parcel) or postprocessing (PostCSS, ...) is runnning via an npm script and generates the "confusing" part which you don't understand and is wrong here.
I would first try to understand which npm script runs when you deploy the app to find out which process generates the interfering class and fix it there. Usually, the command for this script can be found in the package.json in the build script.
If this does not work, simply rename the .number class to .example-number to give it a higher specificity, so that the correct styles are being applied.
I try to do as what tailwindcss not using my custom class inside breakpoints said, but it's still didn't work for me.
Here is my code:
<template>
<div class="img-box-md overflow-hidden rounded-sm lg:img-box-lg">
...
</div>
<template>
......
<style lang="postcss" scoped>
#responsive {
.img-box-lg {
height: 9.2vw;
}
}
</style>
I tried to use #responsive to make the class to be responsive, but failed to find it works in console in large width
I know where the problem is: I use windicss as my alternative to Tailwind, but there is some strange differences between their grammar. For example, the correct grammar of the windicss is
#variants lg {
.lg\:img-box-lg {
height: 9.2vw;
}
}
Code you provided is correct.
Demo: https://play.tailwindcss.com/HIvIPglMqf
Comment under question about using #variants responsive instead of #responsive can be misleading - they are the same (second one is just shorter alias).
Docs: https://tailwindcss.com/docs/functions-and-directives#responsive
Restart compilator and check again. My guess is that you are using new JIT mode where problems in recompiling config is common issue.
I have the following vue component Test.vue an would like to split up this css into test.css along with my other component Home.vue's css to be home.css. However everything compiles into app.css and merges everything.
<style lang='scss'>
h2 {
color: 1px solid red;
}
</style>
<script>
export default {
name: 'test',
}
</script>
<template>
<div class='Test'>
<h2>test</h2>
</div>
</template>
I am using this to build an html and css compiler for another project so I don't have to code in it, but rather just copy the structure from the prod html+css from this vue build. This way I can just copy over these separate test.css and home.css files to my other system. Right now though, it combined styles and there's no per component decoupling of styles.
I don't really know where to start in splitting up the css, I've been googling for hours.
current:
dist
--/css
----app.css
desired:
dist
--/css
----app.css
----test.css
The Vue Webpack loader's documentation suggests using mini-css-extract-plugin for Webpack 4 or extract-text-webpack-plugin for Webpack 3. Have you tried using that?