sarsamurmu/reboost

tailwindcss not work

jet10000 opened this issue · 11 comments

jet10000 commented

tailwindcss not work

main.css

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

h1 {
    color: indianred;
    @apply: text-3xl
}

reboost.js

const {start, DefaultConfig} = require('reboost');
const SveltePlugin = require('@reboost/plugin-svelte');
const VuePlugin = require('@reboost/plugin-vue');
const PostCSSPlugin = require('@reboost/plugin-postcss');

start({
    entries: [
        ['./src/main.js', './static/dist/main.js'],
    ],
    // contentServer: {
    //   root: './static',
    //   open: false
    // },
    // resolve: {
    //     extensions: ['.vue', '.svelte'].concat(DefaultConfig.resolve.extensions),
    //     mainFields: ['.vue', 'svelte', ...DefaultConfig.resolve.mainFields]
    // },
    plugins: [
        SveltePlugin(),
        VuePlugin(),
        PostCSSPlugin({
            // Options
        })
    ]
});

home.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="module" src="{{ url_for('static', path='/dist/main.js') }}"></script>
</head>
<body class="bg-black">
<div id="svelteApp"></div>
<div id="vueApp"></div>
</body>
</html>

main.js

import "./main.css"

import App from './App.svelte';

const app = new App({
  target: document.getElementById("svelteApp"),
  props: {
    // Props
  }
});

// window.app = app;
//
// export default app;


import { createApp } from 'vue';
import App2 from './App.vue';

createApp(App2).mount('#vueApp');

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, 
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
jet10000 commented

Is there a TailwindPlugin ?

sarsamurmu commented

It should be working. I will look into it and there is no TailwindPlugin.

jet10000 commented

It works.

main.js

import "tailwindcss/tailwind.css"

but how to import custom style?

main.css

h1 {
    color: red;
    @apply: text-3xl
}

@apply can't work

How to solve it? a little complicated

sarsamurmu commented

Can you show me your file structure for files - postcss.config.js, reboost.js and main.css and node_modules

jet10000 commented

main.js

import "tailwindcss/tailwind.css"
import "./main.css"

import App from './App.svelte';

const app = new App({
  target: document.getElementById("svelteApp"),
  props: {
    // Props
  }
});

// window.app = app;
//
// export default app;


import { createApp } from 'vue';
import App2 from './App.vue';

createApp(App2).mount('#vueApp');
jet10000 commented

main.py

from pathlib import Path

from fastapi import FastAPI
from starlette.requests import Request
from starlette.staticfiles import StaticFiles
from starlette.templating import Jinja2Templates

app = FastAPI()

current_file = Path(__file__)
current_file_dir = current_file.parent

app.mount("/static", StaticFiles(directory=current_file_dir / "static"), name="static")
templates = Jinja2Templates(directory=current_file_dir / "templates")


@app.get("/")
async def home(request: Request):
    return templates.TemplateResponse("/home.html", {"request": request})
sarsamurmu commented

This is unexpected. I am currently busy but I will look into it and let you know the fix as soon as possible.

  • 👍1
sarsamurmu commented

It's working fine, I tested it with the PostCSS playground. It looks like the problem is in your code. You are using the wrong method for applying styles.

/* Your code */
h1 {
    color: red;
    @apply: text-3xl
}

/* Proper code */
h1 {
    color: red;
    @apply text-3xl;
    /*  ^^^ There should be no colon after @apply */
}

Hope it fixes your issue.

  • 👍1
jet10000 commented

It's works, thank you

image

sarsamurmu commented

No problem. Happy helping 😀