I've installed TailwindCSS 3 to my Symfony 6 project. It works mostly. Only the TailwindCSS components CSS will not be generated. Here's my config and the results.
webpack.config.js:
.enablePostCssLoader((options) => {
options.postcssOptions = {
config: './postcss.config.js'
};
})
postcss.config.js
let tailwindcss = require('tailwindcss');
module.exports = {
plugins: [
tailwindcss('./tailwind.config.js'),
require('postcss-import'),
require('autoprefixer')
],
}
tailwind.config.js
module.exports = {
content: [
'./assets/**/*.{vue,js,ts,jsx,tsx}',
'./templates/**/*.{html,twig}'
],
theme: {
extend: {},
},
plugins: [],
}
asset (pre compiled) app.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
TailwindCSS watcher:
npx tailwindcss -i assets/styles/app.css -o public/build/app.css --watch
webpack watcher:
yarn run watch
Template base.html.twig changed to:
<body class="h-full">
<div class="gap-10"></div>
</body>
Results in new compiled app.css with:
.gap-10 {
gap: 2.5rem;
}
Other classes from TailwindCSS base will work also. So my templates are monitored and TailwindCSS is generating CSS definitions for CSS classes, used by my templates.
But
Template base.html.twig changed to:
<body class="h-full">
<input type="text" class="shadow sm:rounded-md">
</body>
will not result to the TailwindCSS general HTML "input" CSS definitions from "components" like inner padding,demonstrated here:
https://tailwindui.com/components/application-ui/forms/form-layouts
For example:
[multiple], [type=date], [type=datetime-local], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], select, textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #fff;
border-color: #6b7280;
border-width: 1px;
border-radius: 0;
padding-top: 0.5rem;
padding-right: 0.75rem;
padding-bottom: 0.5rem;
padding-left: 0.75rem;
font-size: 1rem;
line-height: 1.5rem;
--tw-shadow: 0 0 #0000;
}
And my target app.css won't change its size when I remove or add the "@tailwind components;" from my source app.css.
I can't see my error here. Does somebody see the reason for the issue?
I've tried:
different import syntax in app.css like:
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
changing the load order here to:
module.exports = {
plugins: [
require('postcss-import'),
tailwindcss('./tailwind.config.js'),
require('autoprefixer')
],
}
less complex HTML template markup
static component.css file grabbed from tailwindui.com
This will work but is not the way, TailwindCSS 3 should be implemented.
I've just found the solution!
The form definitions are a separate tailwind plugin.
https://github.com/tailwindlabs/tailwindcss-forms
So I just had to do:
And