CODEWITHSUNDEEP
tailwind-css
Robin van Rossum
Robin van Rossum

Reputation: 11

Tailwind basis-1/4 flex-basis not available in basic tailwind?

Just started with Tailwind.

Works great! Got everything set up fine.

Everything works except for basis (flex-basis). So all the other styling styles are there.

tailwindcss version 3.2.4

Is basis no longer supported?

What am I doing wrong?

mix.js("resources/js/app.js", "public/js")
    .postCss("resources/css/app.css", "public/css", [
        require("tailwindcss"),
    ]);

@tailwind base;
@tailwind components;
@tailwind utilities;

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './storage/framework/views/*.php',
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

<li class="flex items-center p-4 m-2 border-b border-solid border-gray-100">
<img class="basis-8/12 w-16 mr-4" src="img/test.jpg">
<span class=" text-xl">admin super</span>
</li>

Upvotes: 0

Views: 719

Answers (2)

Robin van Rossum
Robin van Rossum

Reputation: 11

Okay, I just found what was wrong. Somehow an older version of tailwind was installed. The previous version didn't include flex-basis. Deinstalled and reinstalled tailwind and now everything works fine!

Upvotes: 1

Kenny Sexton
Kenny Sexton

Reputation: 383

Here is a small demo of flex-basis working in a playground. Did you remember to wrap the parent div in class="flex"?

https://play.tailwindcss.com/zODgDbTEof

Upvotes: 0

Related Questions