tailwind icon indicating copy to clipboard operation
tailwind copied to clipboard

Tailwind classes are just not working

Open Franjooo opened this issue 3 years ago • 1 comments
trafficstars

I tried to create a new NativeScript project with the newest versions exactly like in the documentation and wanted to include tailwind as well. But it's just not working. The css classes are not applied, but I also have no error in the log. It just gets ignored.

Since this is my first try with NativeScript, I have no idea how to debug this situation. Do you have any recommendations for me what I can try?

Thanks in advance!

Franjooo avatar Oct 06 '22 11:10 Franjooo

Double check you set up the tailwind config correctly, it has a content array which tells TailwindCSS where to look for your source code & generate the classes based on (it only generates the css for the classes you actually use, so if it can't find your source code, no classes get generated...). For most apps the default we have in the readme/docs should be correct, but I believe in most Angular projects the path needs to be changed to ./src instead of the default ./app

// tailwind.config.js

module.exports = {
  content: [
-   './app/**/*.{css,xml,html,vue,svelte,ts,tsx}'
+   './src/**/*.{css,xml,html,vue,svelte,ts,tsx}'
  ],
  // use .dark to toggle dark mode - since 'media' (default) does not work in NativeScript
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [],
  corePlugins: {
    preflight: false // disables browser-specific resets
  }
}

rigor789 avatar Oct 06 '22 11:10 rigor789