Comments (3)
@polaroidkidd you're running into one of the notable limitations of Tailwind, you cannot use constructed classes:
https://tailwindcss.com/docs/content-configuration#dynamic-class-names
The best way to understand this is to understand how the Tailwind compiler works:
- It scans all files you provide it access to in your Tailwind Config > Context section
- It scans these files looking for full CSS utility classes, it cannot "see" partials
- Finally it adds any classes it finds to your CSS bundle
In your case the compiler is missing all your classes because they are not able to be read verbatim.
Another thing, we follow Tailwind's recommendation to avoid abstracting utility classes to a component like this. We follow their utility-first approach:
https://tailwindcss.com/docs/utility-first
This means that the classes themselves ARE the abstraction, and the expectation is you will mix and match the utility classes as you implement your interface (buttons, etc).
I'm going to close this out, but if you have any questions about these topics let me know, but please do make sure you read those sections I linked in full. They will provide a lot of help in understanding how this works.
from skeleton.
Oh wow. I had 100% forgotten about that. Thanks for the in-depth response. I was taring my hair out over this one. I really appreciate it.
from skeleton.
I've added a stackblitz https://stackblitz.com/edit/vitejs-vite-sa3fmn?file=src%2Froutes%2F%2Bpage.svelte
from skeleton.
Related Issues (20)
- Disabled state HOT 1
- installation instructions for next recommend a deprecated package HOT 1
- NEXT: Resolve regressions in the component unit tests HOT 2
- NEXT: Resolve global focus states for native elements and Zag-based components HOT 7
- NEXT: Update Svelte/React packages to utilize PNPM Catalogs for version syncing HOT 1
- NEXT: Improve the default SVG images for the Ratings component
- NEXT: Contributor component documentation should cover Zag.js integration
- NEXT: Implement Zag-based animations for the React Accordion component
- NEXT: Review options for sharing and maintaining common component data between frameworks
- Theme Generator myCustomTheme HOT 7
- NEXT: investigate Vike for use in our sandbox apps HOT 6
- Code Blocks skeleton v3 HOT 2
- SvelteKit Tailwind’s layers src: url | skeleton v2 & v3 | SvelteKitError: Not found: /assets HOT 6
- Hotfix: Restore v3 Navigation Docs
- dark-mode | make style changes when OsPrefers and UserPrefers change HOT 1
- Is the selection prop in RecursiveTreeView reactive? HOT 4
- NEXT: Custom Progress Animation Not Optimal
- NEXT: React package has `react` and `react-dom` as deps instead of peerDeps
- Text in total field for paginator HOT 1
- Custom Fonts documentation guide to Preloading fonts affects performance and SEO drastically HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from skeleton.