I'm using Laravel Vite and have this in my app.css
#tailwind base;
#tailwind components;
#tailwind utilities;
#import 'animate/base.css';
#import 'animate/animations.css';
#layer components {
.ql-container {
#apply border-2 border-slate-300;
}
}
And postcss.config.js
module.exports = {
plugins: {
'postcss-import': {},
'tailwindcss/nesting': {},
tailwindcss: {},
autoprefixer: {},
},
}
The ql-container custom Tailwind styles are not getting compiled and I'm not sure why. This is how it's defined in the Tailwind docs.
If the class ql-container is added inside an #layer directive and its use is not detected by Tailwind in any of your templates, then it will not be included in the css output.
If it is not wrapped in a directive then it will always be added to the css output, so just don't wrap the style with #layer components { ... }.
Related
I'm trying to use Tailwind CSS with Vuepress 2.
I have installed npm install -D tailwindcss#latest postcss#latest autoprefixer#latest.
In my .vuepress/config.js file I have:
import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'
export default {
title: 'Frontend Library',
port: 8081,
...
bundlerConfig: {
viteOptions: {
css: {
postcss: {
plugins: [tailwindcss, autoprefixer]
}
}
}
}
}
I have also docs/.vuepress/styles/index.scss file:
#tailwind base;
#tailwind components;
#tailwind utilities;
There is no error, but Tailwind styles are not applied though..
Any ideas?
Thanks
I got a problem using tailwind css with Vue3. Looking at the network tab it's size is 4.4 MB.
The postcss.config.js
module.exports = {
plugins: {
'postcss-import': {},
tailwindcss: {},
autoprefixer: {},
cssnano: {}
}
}
tailwind.config.js
module.exports = {
content: [
"./frontend/**/*.{js,jsx,ts,tsx,vue}",
"./app/views/**/*.html.erb"
],
prefix: 'tw-',
...
cssnano is added using yarn.
yarn.lock
cssnano-preset-default#^5.2.12:
cssnano#5.1.13
tailwindcss#^2.1.4:
Importing tailwind in main.css which itself is imported in the vue entrypoints.
#tailwind utilities;
#tailwind base;
#tailwind components;
Whether in development nor in production the size of main.css changes.
All right, I solved it. The version of tailwind I'm using ain't compatible with the "content" setting in the current documentation. I still have to use this syntax:
purge: {
enabled: true,
content: [
"./frontend/**/*.{js,jsx,ts,tsx,vue}",
"./app/views/**/*.html.erb"
],
},
Also needed to do a re-build of the prod environment.
You have also the mode JIT it will generates your styles on-demande https://v2.tailwindcss.com/docs/just-in-time-mode
Need to use tailwind in a next.js project, but only in one page
How to import the Tailwind directives
#tailwind base; #tailwind components; #tailwind utilities;,
without affecting all other pages?
You can follow the same steps as mentioned here.
However in Step 3 , just give the path of your only file where you want Tailwindcss.
module.exports = {
content: [
"./pages/<path_of_your_file>",
],
theme: {
extend: {},
},
plugins: [],
}
i've followed this guide : https://tailwindcss.com/docs/guides/remix
step by step (twice,to be sure). yet nothing works.
my tailwind config js looks like that :
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ['./app/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [],
};
My root:
import styles from './styles/app.css';
export function links() {
return [{ rel: 'stylesheet', href: styles }];
}
I've created a new folder called styles inside app folder and inside the styles i've created app.css which has the following :
#tailwind base;
#tailwind components;
#tailwind utilities;
I'm trying to style my index.tsx
export default function Index() {
return (
<div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.4' }}>
<h1 className='text-3xl font-bold text-blue-500 underline'>Hello world!</h1>
</div>
);
}
i run : "npm run dev" yet i get no style over my h1 in the index.
any help appreciated.
You need to create 2 new "styles" folders, the first at the same level as the package.json, and create the app.css file in this place with the code:
./styles/app.css
#tailwind base;
#tailwind components;
#tailwind utilities;
The second styles folder are inside "app" directory (here the tailwind command will export the compiled CSS)
./app/styles/app.css this is the output of the tailwindcss command
Then you can import the ./app/styles/app.css file in the root.js(x) file
import styles from "./styles/app.css"
export function links() {
return [{ rel: "stylesheet", href: styles }]
}
i had the same problem and i want to add to #Michael's that it worked for me when i included the <Links /> component from remix inside the head.
import { Links } from '#remix-run/react'
<head>
<Links />
...
</head>
your links() function will not be included otherwise.
I'm trying to use a custom class overflow:inherit as #apply overflow-inherit in tailwind next.js project but it's throwing error. However, I can #apply pre-built tailwind classes like #apply flex flex-col md:h-full h-screen; but not custom.
Full repo: https://github1s.com/GorvGoyl/Personal-Site-Gourav.io
tailwind.scss:
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer utilities {
#variants responsive {
.overflow-inherit {
overflow: inherit;
}
}
}
project.module.scss:
.css {
:global {
.wrapper-outer {
#apply overflow-inherit; //trying to apply custom utility
}
}
}
Error:
wait - compiling...
event - build page: /next/dist/pages/_error
error - ./layouts/css/project.module.scss:4:6
Syntax error: C:\Users\1gour\Personal-Site\project.module.scss The `overflow-inherit` class does not exist, but `overflow-hidden` does. If you're sure that `overflow-inherit` exists, make sure that any `#import` statements are being properly processed before Tailwind CSS sees your CSS, as `#apply` can only be used for classes in the same CSS tree.
2 | :global {
3 | .wrapper-outer {
> 4 | #apply overflow-inherit;
| ^
5 | }
6 | }
postcss.config.js:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
"next": "^10.0.7",
"tailwindcss": "^2.0.3",
"sass": "^1.32.8",
"postcss": "^8.2.6",
I had the same problem on my Laravel project.
I decided that postcss is not enough for me. So in the webpack.mix.js I deleted the following
mix.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]);
and replaced it with sass like this
mix.sass("resources/css/app.scss", "public/css").options({
postCss: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
], });
Now, I got a number of cool features including the one you want
I don't even need to use #layer
in my scss file I can combine #apply and #extend and it works
.btn-my-theme{
#apply rounded border py-2 px-3 shadow-md hover:shadow-lg;
}
.btn-my-primary{
#extend .btn-my-theme;
#apply text-blue-600 bg-blue-200 hover:bg-blue-100 border-blue-500;
}
.btn-my-secondary{
#extend .btn-my-theme;
#apply text-gray-600 bg-gray-200 hover:bg-gray-100 border-gray-500;
}
Set CSS validate in "Workspace/.vscode/settings.json"
"css.validate": false,
or "User/settings.json"
"css.validate": false,
like this link