What is the proper way to configure SolidJS with TailwindCSS?

[msalemor]

This worked for me in the farm.config.ts file, but not sure if this is the right way?

import { defineConfig } from '@farmfe/core';
import farmJsPluginSolid from '@farmfe/js-plugin-solid'
import farmPostcssPlugin from '@farmfe/js-plugin-postcss'

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

The SolidJS farm.config.ts file that gets deployed from bun create farm@latest looks like this:

import { defineConfig } from '@farmfe/core';
import solid from 'vite-plugin-solid';

export default defineConfig({
  vitePlugins: [
    () => ({
      vitePlugin: solid(),
      filters: ['\\.tsx$', '\\.jsx$']
    })
  ]
});

[wre232114]

• For solidjs: @farmfe/js-plugin-solid is deprecated(It still works, but may not be long term maintained), we recommend to use vite plugin solid or other plugins that solidjs maintained officially
• For tailwindscss: Using @farmfe/js-plugin-postcss and tailwind postcss plugin

[msalemor]

Then, what is the configuration for tailwindcss with Solid? Tried this, and it did not work after installing tailwindcss using the vite/SolidJS instruction which usually work.

import { defineConfig } from '@farmfe/core';
import solid from 'vite-plugin-solid';
import farmPostcssPlugin from '@farmfe/js-plugin-postcss'

export default defineConfig({
  vitePlugins: [
    () => ({
      vitePlugin: solid(),
      filters: ['\\.tsx$', '\\.jsx$'],
      postcss: farmPostcssPlugin()
    })
  ]
});
```

Thank you

[wre232114]

Try

import { defineConfig } from '@farmfe/core';
import solid from 'vite-plugin-solid';
import farmPostcssPlugin from '@farmfe/js-plugin-postcss'

export default defineConfig({
  vitePlugins: [
    () => ({
      vitePlugin: solid(),
      filters: ['\\.tsx$', '\\.jsx$'],
    })
  ],
  plugins: [farmPostcssPlugin()]
});

For farm plugins, configure it in plugins; For vite plugins, configure it in vitePlugins