Support tailwind.config.ts

[tobyperplex]

Clear and concise description of the problem

Histoire will automatically detect your Tailwind CSS configuration and generate design system stories for you. But not if you make your tailwind.config.js with module.exports a tailwind.config.ts with export default.

Suggested solution

Support both tailwind.config.js with module.exports and tailwind.config.ts with export default.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that requests the same feature to avoid creating a duplicate.

[JackNeto]

I have the same problem, I'm trying to add histoire to an existing svelte project that uses tailwind with some theming and plugins and and these are not bing picked up. Instead histoire displays some other tailwind configuration in the ui.

Here's my setup:

histoire.config.js

import { defineConfig } from 'histoire';
import { HstSvelte } from '@histoire/plugin-svelte';

export default defineConfig({
	plugins: [HstSvelte()],
	setupFile: './histoire-setup.ts',
});

histoire-setup.ts

import './src/app.css';

app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

tailwind.config.js (this file is ignored)

/** @type {import('tailwindcss').Config} */
export default {
	content: [
		'./src/**/*.{html,js,svelte,ts}',
		'./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}',
		'./node_modules/flowbite-svelte-icons/**/*.{html,js,svelte,ts}'
	],
	plugins: [require('flowbite/plugin')],
	darkMode: 'class',
	theme: {
		extend: {
			colors: {
                               .... a bunch of colors