Can anyone explain why the preset is generating CSS in the output file, but the styles are not displaying in the browser? When I manually write CSS in newstyle.css, it gets outputted to output.css and renders correctly in the browser.
I attempted adding tailwind.preset.js to content:[] in tailwind.config.js, but it didn't make a difference. Removing mode: 'jit' also had no impact on the issue.
Do I need to include something specific in postcss.config.js for this to work properly?
// 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>
<!-- More HTML code omitted for brevity -->
</body>
</html>