Tailwind preset is outputting css, but not showing styles on the webpage

Question

Please help me understand why the preset is outputting css to the output file but not showing the styles in the browser. If I write plain CSS in newstyle.css it outputs to output.css and shows in the browser.

I tried adding tailwind.preset.js to content:[] in tailwind.config.js but its not necessary. I tried removing mode: 'jit', but it had no effect.

Is there something that needs to be added to postcss.config.js?

// package.json

{
  "name": "project-tailwind",
  "version": "1.0.0",
  "description": "tailwindcss sandbox",
  "main": "index.js",
  "scripts": {
    "build": "postcss source/newstyle.css -o public/output.css -w"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.4.7",
    "postcss": "^8.4.14",
    "postcss-cli": "^10.0.0",
    "tailwindcss": "^3.1.6"
  }
}

// tailwind.config.js

module.exports = {
    mode: 'jit',
    content: [
        './public/index.html',
        './public/**/*.{html,js}'
    ],
    presets: [
        require('./tailwind.preset.js')
    ]
}

// postcss.config.js

const autoprefixer = require('autoprefixer');

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {}
    }
}

// tailwind.preset.js

module.exports = {
    mode: 'jit',
      content: [
        './public/index.html',
        './public/**/*.{html,js}'
    ],
    theme: {
      colors: {
        blue: {
          light: '#85d7ff',
          DEFAULT: '#1fb6ff',
          dark: '#009eeb',
        },
        pink: {
          light: '#ff7ce5',
          DEFAULT: '#ff49db',
          dark: '#ff16d1',
        },
        gray: {
          darkest: '#1f2d3d',
          dark: '#3c4858',
          DEFAULT: '#c0ccda',
          light: '#e0e6ed',
          lightest: '#f9fafc',
        }
      },
      fontFamily: {
        sans: ['Graphik', 'sans-serif'],
      },
      extend: {
        flexGrow: {
          2: '2',
          3: '3',
        },
        zIndex: {
          60: '60',
          70: '70',
          80: '80',
          90: '90',
          100: '100',
        },
      }
    }
  }

/* newstyle.css */

.preset {
    @apply font-sans;
    @apply text-pink-dark;
}

a {
    color: chartreuse;
}

/* output.css */

.preset {
    font-family: Graphik, sans-serif;
    --tw-text-opacity: 1;
    color: rgb(255 22 209 / var(--tw-text-opacity));
}

a {
    color: chartreuse;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind Sandbox</title>
    <link rel="stylesheet" href="/public/output.css">
</head>
<body>
    <h1 class="font-sans text-pink-dark">Welcome to the Tailwind 3.1 Sandbox!</h1>
    <h2>These headings utilize custom base directives</h2>
    <h3>The sizes can be freely manipulated from the tailwind.config.js file</h3>
    <div>
        <a href="#">Link to something</a>
    </div>
    <div>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quibusdam deleniti expedita asperiores provident eum sequi, nam laborum veritatis non?</p>
    </div>
    <div>
        <h2>
            Container
        </h2>
    </div>
    <div>
        <div>
            <div>
                Flex 1
            </div>
            <div>
                Flex 2
            </div>
            <div>
                Flex 3
            </div>
        </div>
    </div>
    <div>
        <div>
            <div>
                Flex 1
            </div>
            <div>
                Flex 2
            </div>
            <div>
                Flex 3
            </div>
        </div>
    </div>
    <div>
        <div>
            <div>
                Grid Col 1
            </div>
            <div>
                Grid Col 2
            </div>
            <div>
                Grid Col 3
            </div>
        </div>
    </div>
    <div>
    <button>
        Click me
    </button>
    <button>
        Click me
    </button>
    </div>
    <div>Lorem ipsum dolor sit amet.
    </div>
    <div>
        <button>Blue Button</button>
    </div>
    <div>
        <button>Other button</button>
    </div>
    <div>
        <button>Another button</button>
    </div>
</body>
</html>

this `/public/output.css` most likely is wrong maybe only `output.css` or `./output,css` — dippas, Jul 23 '22 at 23:09
If `/public/output.css` was wrong then the pure css on the `` tag would not work. That is the correct file path. — solidwake, Jul 24 '22 at 00:05
Not sure what you're trying to communicate but I'll just reiterate that the file path is sound. I tested pure css styles in the `newstyle.css` file. They output to `output.css` and show in the browser. — solidwake, Jul 24 '22 at 00:31

score 0 · Accepted Answer · answered Jul 26 '22 at 03:32

Even if a custom preset is created, the relevant directives must be added to the source stylesheet, so in my very basic sample preset, the @tailwind utilities directive had to be added to newstyle.css to use the font-sans and text-pink-dark custom utility classes.

Tailwind preset is outputting css, but not showing styles on the webpage

1 Answers1