最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

Tailwind 4 to build html, css and javascript not working - Stack Overflow

programmeradmin2浏览0评论

this was vite.config.js in version 3

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        home: 'src/pages/index.html',
        contact: 'src/pages/contact.html',
        order: 'src/pages/order.html',
      },
    },
    minify: 'terser', // Minify JS and CSS
    terserOptions: {
      compress: {
        drop_console: true, // Remove console logs in production
        drop_debugger: true, // Remove debugger statements
      },
    },
  },
  css: {
    postcss: {
     plugins: [tailwindcss(), require('autoprefixer')],
    },
  },
});

how to make this work with tailwind 4?

i'm also using scss:

@use 'tailwindcss/base';
@use 'tailwindcss/components';
@use 'tailwindcss/utilities';

@use 'variables';

body {
background: tomato
}

@layer base {
  html {
    font-feature-settings: 'cv11';
  }
}

[x-cloak] {
  display: none !important;
}

At the moment this solution isn't working. Thank you to however already have this working.

this was vite.config.js in version 3

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        home: 'src/pages/index.html',
        contact: 'src/pages/contact.html',
        order: 'src/pages/order.html',
      },
    },
    minify: 'terser', // Minify JS and CSS
    terserOptions: {
      compress: {
        drop_console: true, // Remove console logs in production
        drop_debugger: true, // Remove debugger statements
      },
    },
  },
  css: {
    postcss: {
     plugins: [tailwindcss(), require('autoprefixer')],
    },
  },
});

how to make this work with tailwind 4?

i'm also using scss:

@use 'tailwindcss/base';
@use 'tailwindcss/components';
@use 'tailwindcss/utilities';

@use 'variables';

body {
background: tomato
}

@layer base {
  html {
    font-feature-settings: 'cv11';
  }
}

[x-cloak] {
  display: none !important;
}

At the moment this solution isn't working. Thank you to however already have this working.

Share Improve this question asked Jan 29 at 20:49 ZokorZokor 1751 silver badge4 bronze badges 2
  • "Not working". If you tell us what isn't working, how it should work, and what you've tried to solve the issue, we'd be happy to help. But without that, it's hard to assist. We can't read your mind, and without a clear reproduction, we can't guess the error message or what you're trying to achieve. – rozsazoltan Commented Jan 29 at 22:17
  • Problem installing TailwindCSS with Vite, after "npx tailwindcss init -p" command or How to upgrade TailwindCSS? – rozsazoltan Commented Jan 29 at 22:19
Add a comment  | 

1 Answer 1

Reset to default 0

As it is said in the docs, the TW config has been completely rebuilt : no more tailwind.config.js...

Instead, in your main CSS file, the first line you should write is @import "tailwindcss";

If you need to accurately indicate to TW where are the files to watch the way you did with TW3 through its file tailwind.config.js, as it is mentioned here https://github/tailwindlabs/tailwindcss/issues/15943, after the @import 'tailwindcss' you can specify @source './../templates/'; with your own path to the folder to watch.

Additionnaly, in your vite.config.js, you could write :

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [ tailwindcss() ]),
  ]
});

You may find more help on https://tailwindcss/docs/installation/using-vite

Finally, as you can see here https://tailwindcss/docs/theme, you will be able to setup the equivalent of the v3 tailwind.config.js in the first lines of your main CSS file, beginning with something like this :

@import 'tailwindcss';
@source './../templates/';


@theme {
  --breakpoint-tablet: 1024px;
  --breakpoint-laptop: 1440px;
  --breakpoint-desktop: 1920px;
  /* And so on... */
}

I hope this will help

发布评论

评论列表(0)

  1. 暂无评论