mathewparet's avatar

Tailwind suddenly not working well

I have two problems / queries.

1. I can see that my tailwind.config.js has the below:

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/js/**/*.vue',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
};

Why is tailwind including blade PHP files?

2. CSS not resolved properly.

Below is the screenshot of a project I am working on when "status" is Inactive: _You can see the highlighted code indicates gray colour, and it is working as expected

Below is the screenshot of a project I am working on when "status" is Active: _You can see the highlighted code indicates green colour, and it is NOT working as expected

This was working until some time back, but then when I edited something entirely different on an entirely new file, npm recompiled (it was on watch mode) and then it is gone. I reverted my changes to that file and still this hasn't resolved.

0 likes
5 replies
Sinnbeck's avatar
  1. That is because you can use tailwind inside blade files. It just tells tailwind to scan all files listed there, for tailwind classes
  2. How are you adding classes? Can you show the code for that span? Also, what version of tailwind are you using?
mathewparet's avatar

@Sinnbeck Thanks for the response.

I am not adding any new tailwind classes at all. I just am working on vue components.

The code in question is a component defined as:

<template>
    <span v-if="this.canToggle" :class="'bg-'+this.theme+'-100 text-'+this.theme+'-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-'+this.theme+'-200 dark:text-'+this.theme+'-800'">
        <Link method="post" as="button" :href="this.toggle" preserve-scroll>{{this.text}}</Link>
    </span>
    <span v-else :class="'bg-'+this.theme+'-100 text-'+this.theme+'-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-'+this.theme+'-200 dark:text-'+this.theme+'-800'">
        {{this.text}}
    </span>
</template>
<script>
import { defineComponent } from 'vue'
import { Link } from "@inertiajs/inertia-vue3";

export default defineComponent({
    components: {
        Link,
    },
    props: {
        color: {
            type: String,
            default: 'blue'
        },
        text: {
            type: String,
            required: true,
        },
        canToggle: {
            type: Boolean,
            default: false
        },
        toggle: {
            type: String
        }
    },
    computed: {
        theme()
        {
            return this.color[this.text];
        }
    }
})
</script>

And it is called as:

<template>
  <app-layout title="Manage Championships">
    ...
    <div class="py-12">
        <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                ...
                </thead>
				<tbody class="bg-white divide-y divide-gray-200">
                <tr v-if="this.championships.length == 0">
                  <td colspan="6" class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center">
                    No championships defined. <Link class="text-sm py-1 px-2 bg-indigo-300 hover:bg-indigo-400 text-indigo-800 rounded-full" :href="route('manage.championships.create')" v-if="this.can.create">Add one</Link>
                  </td>
                </tr>
                <tr v-for="championship in this.championships" :key="championship.slug">
                  ...
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    <action-status :color="{'Active':'green', 'Inactive':'gray'}" :text="championship.status" :can-toggle="championship.can.toggle" :toggle="route('manage.championships.toggle', {championship: championship.slug})"/>
                  </td>
                </tr>
              </tbody>
            </table>
       </div>
    </div>
</template>
<script>
import { defineComponent } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";
import ActionStatus from '@/Partials/ActionStatus'

export default defineComponent({
  components: {
    AppLayout,
    ActionStatus
  },
  props: ["championships", "can"],
  
});
</script>

And the code returning from my controller is:

return Inertia::render('Championships/Manage/Index', compact('championships', 'can'));

My tailwind version:

"@tailwindcss/forms": "^0.4.0",
"@tailwindcss/typography": "^0.5.0",
"@vue/compiler-sfc": "^3.0.5",
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"postcss-import": "^12.0.1",
"tailwindcss": "^3.0.0",
mathewparet's avatar

@Sinnbeck Thanks for that.

I tried adding this and built npm again:

safelist: [
        {
            pattern: /bg-(green|gray)-(100|200|800)/,
            pattern: /text-(green|gray)-(100|200|800)/,
        }
    ],

Now the text is green where expected, but the bg-green-* doesn't seem to work still

Also, is there a way of disabling purging so I do not need to worry about making a list of all classes I need in the safelist.

Alternatively, I created compute elements to decide the class. Surprisingly that is working even though it is dynamic!

Sinnbeck's avatar

@mathewparet The only way is to go back to tailwind 2. But it was introduced as it is still done in v2 when building for production, and the dev css file is several megabytes.

Not sure what you mean with bg-green-*? Can you show an exact example of something that isnt working?

Please or to participate in this conversation.