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

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

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>

Solution

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.