-
-
Notifications
You must be signed in to change notification settings - Fork 309
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
NEXT: Tailwind Plugin #2360
Comments
This comment was marked as resolved.
This comment was marked as resolved.
Follow-up after the discussion in this thread: https://discord.com/channels/1003691521280856084/1196891462302957608 A change we can do is to expose all of the preset themes in an ESM format (so that they are importable in the user's app) and change the plugin api that registers them. So rather than doing this (current): // tailwind.config.js
// user's custom themes
import { myCustomTheme1, myCustomTheme2 } from "./customThemes.js";
/** @type {import('tailwindcss').Config} */
export default {
// ...
plugins: [
skeleton({
themes: {
custom: [
myCustomTheme1,
myCustomTheme2
],
preset: [
{ name: 'crimson', enhancements: true },
{ name: 'gold-nouveau', enhancements: true },
{ name: 'hamlindigo', enhancements: true },
{ name: 'modern', enhancements: true },
{ name: 'rocket', enhancements: true },
{ name: 'sahara', enhancements: true },
{ name: 'seafoam', enhancements: true },
{ name: 'skeleton', enhancements: true },
{ name: 'vintage', enhancements: true },
{ name: 'wintry', enhancements: true }
]
}
})
]
}; We can instead unify the api such that custom themes and presets are registered to the same interface (v3): // tailwind.config.js
// they can all be imported via an import glob
import * as themes from "@skeletonlabs/skeleton/themes";
// or imported individually like so:
import { modern, rocket } from "@skeletonlabs/skeleton/themes";
// user's custom themes
import { myCustomTheme1, myCustomTheme2 } from "./customThemes.js";
/** @type {import('tailwindcss').Config} */
export default {
// ...
plugins: [
skeleton({
themes: [
myCustomTheme1,
myCustomTheme2,
themes.crimson,
themes.goldNouveau,
themes.hamindigo,
modern,
rocket,
// etc..
]
})
]
}; |
@AdrianGonz97 I love it. Huge quality of life improvement there because it's one less thing to think about. Themes are just themes. I've added it to the list in the OP. |
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
In regards to the darkMode issue - basically we need TW to generate different sets of classes depending on the darkMode strategy selected (also note that there has been an update https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually to the names). As this is a build time artefact and will be static for our end-users, we can create two TW configs here for embedding into the package. Then on end-user load of the skeleton plugin, we need to get the darkMode setting for their project and use that to determine which generated CSSinJS module we import to pass back to TW. TW does not pass the full config settings to the plugins, either via withOptions or by destructuring the theme on plugin init. Considering the myriad of project setups/frameworks/monorepos etc that could come into play to try and find the tailwind config file to then parse, the safest option I can see is to parse the callStack and get the calling file from there: in export function getSkeletonClasses() {
// try/catch because it will throw when generated-classes.js isn't generated yet
try {
const error = new Error();
// Extract stack trace from the Error object
const stackTrace = error.stack ?? 'not found';
const regex = /at registerPlugins \(([^()]+?)\/node_modules/g;
const match = regex.exec(stackTrace);
let path = '';
if (match) {
path = match[1];
}
const config = readFileSync(path + '/tailwind.config.ts', 'utf-8');
writeFileSync('/Users/Shared/blah.txt', path, 'utf-8'); //purely for debug as console.log is trapped in the child process
const { components, base } = require('./generated/generated-classes.cjs'); This returns an absolute path to the folder containing the tailwind.config for me on macOS node and bun. It needs further testing on other platforms etc. We should then be able to import/parse it and get the mode to then know which generated file to return from above. Gut feeling says it would be bad to require() the users tailwind config in case of side effects. It is also not guaranteed to just be 'selector' | 'media' as can be seen here |
@AdrianGonz97 @niktek we've completed pretty much everything slated for the Tailwind plugin in this ticket, minus the issues Nik brought up above. If you guys want to suss that out separately then please go for it. Feel free to create a standalone ticket. To everyone - |
This will act as a hub to centralize for this information.
See Also
The following updates will likely need to be handled in coordination.
Tailwind Directive Layers
base
- global styles, resets, etccomponents
- for opt-in element styles, like.btn
utilities
- general purpose utility classesvariants
- to append new variants, likehover:
andmd:
Maintainer Requests
The following requests are coming straight from the Skeleton team. These are highly likely be implemented:
theme.extend
over standalone classes@apply
directly in the tailwind plugin's CSS-in-JS objects (reference)properties_dark
, etc)Aim to make(wait until TW v4)config.content
simpler for core/svelte/react (reference)Design Tokens:
token
prefix/suffix concept after implementing withtheme.extend
Tailwind Components (aka "Elements")
Cookbook (replaces "Blocks")
Community Requests
The following requests have come from the community and are under consideration:
Use :host instead of :root to declare theme color variables #2167(will not implement)Bugs and Issues
Feedback
If you have additional updates or requests for this feature, please do so in the comments section below.
The text was updated successfully, but these errors were encountered: