Search code examples
tailwind-css

Arbitrary values not working in Tailwindcss

I'm trying to use arbitrary values in my html program using tailwindcss, however no matter what I try it seem to not work. I also have tried adding them to my tailwind.config.js file and using them as an extension but that seen to not work either. I also have tried removing extend{} and just adding them under theme, but still no results.

Here is the tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./venv/templates/**/*.{html,js}"], 
  theme: {
    extend: {
      colors: {
        'custom-blue': '#1692AC',
        'custom-pink': '#AA1A55',
        'custom-red': '#F7435F',
        'custom-orange': '#F78160',
      },
      minHeight: {
        '95': '23.3rem', // 372.8px
      },
      height:{
        '500' : '500px'
      }
    },
  },
  plugins: [],
}

A HTML code snippet: (the custom blue also does not apply)

  <div class="flex px-20 mt-16">
    <div class="bg-gray-300 flex-auto hover:bg-custom-blue w-[100px] h-[200px]">
      <h2 class="font-bold top-0 left-0 p-1" style="font-size: xx-large; color: #1692AC">Something</h2>
    </div>
  </div>
Solution

  • there is some missing part of your project. first try to make your project correctly. use this to initialize npm in your project. npm init -y Install Tailwind CSS and its dependencies. npm install -D tailwindcss postcss autoprefixer Generate the tailwind.config.js and postcss.config.js files. npx tailwindcss init -p now create style.css file and insert this inside of file.

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

    now use this to build your css file npx tailwindcss build main.css -o output.css now link your build css file to html file.

    <link href="./output.css" rel="stylesheet">

    your tailwind.config.js and project structure need to be like this. after doing any style change build your css file.

    tailwind.config.js and project structure