Esto funciona:
<div class="list p-2" />Esto no funciona:
<style lang="postcss"> @tailwind base; @tailwind components; @tailwind utilities; @layer components { .list { @apply p-2; } } </style>Busqué en los documentos de Svelte, pero explica el proceso con SvelteKit, que no estoy usando. ¿Cómo puedo hacer que funcione?
webpack.config.js:
... module: { rules: [ { test: /\.css$/i, use: ['style-loader', 'css-loader', 'postcss-loader'], },tailwind.config.js:
module.exports = { purge: [ './*.html', './src/**/*.js', './src/**/*.svelte' ], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], }postcss.config.js:
module.exports = { plugins: [ ['tailwindcss'], ['autoprefixer'], ], };Debe instalar svelte-preprocess y usarlo en svelte-loader para Webpack.
La documentación para usar @import da un ejemplo :
const sveltePreprocess = require('svelte-preprocess'); ... module.exports = { ... module: { rules: [ ... { test: /\.(html|svelte)$/, use: { loader: 'svelte-loader', options: { preprocess: sveltePreprocess({ postcss: true }) } } } ... ] }, plugins: [ new webpack.HotModuleReplacementPlugin(), ... ] } (Es posible que necesite varias dependencias de pares, como postcss y postcss-load-config según el tipo de funciones que use).