I have an HTML file containing Tailwind styles stored in my database, which needs to be fetched first. This will result in an HTML string that will be inserted into dangerouslySetInnerHtml. Here is the code snippet (utilizing Qwik):
export const useHTML = routeLoader$(async (path) => {
// const domainName = path.url.host
let domainName = path.url.host
let htmlFile = ''
if (path.url.host === 'localhost:5173') {
domainName = 'page.id'
}
if (path.pathname) {
htmlFile = `linkToMyFile/index.html`
} else {
htmlFile = `linkToMyFile/index.html`
}
const responseHtml = await fetch(htmlFile);
return (await responseHtml.text() as string)
});
export default component$(() => {
const htmlContent = useHTML().value;
const htmlString: string = htmlContent.toString();
return (
<>
<div dangerouslySetInnerHTML={htmlContent} />
</>
)
})
I have also created a custom configuration for styling by modifying the tailwind.config.js to match the style of the fetched HTML content. Here is how the Tailwind config looks:
export default {
content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
theme: {
screens: {
xs: '480px',
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1400px',
},
colors: {
current: 'currentColor',
transparent: 'transparent',
black: '#000',
white: '#fff',
//the rest of the code
},
fontWeight: {
hairline: '100',
thin: '200',
light: '300',
normal: '400',
medium: '500',
semibold: '600',
bold: '700',
extrabold: '800',
black: '900',
},
fontFamily: {
body: '"Clash Display"',
heading: '"Clash Display"',
sans: 'ui-sans-serif',
serif: 'ui-serif, Georgia',
},
//the rest of the default style code
The final output did not turn out as expected. It seems like the issue lies within my fetched HTML code placed in dangerouslySetInnerHtml. The Tailwind config is being applied before the fetching process is completed. I attempted to directly input the code in the prop, and it worked fine. However, since the styling needs to be dynamic, the fetching process is necessary.