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
Related
I installed tailwindcss via scoop and created a new project.
Then i ran via CLI tailwindcss init and edited tailwind.config.cjs:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./*.{html}",
],
theme: {
extend: {},
},
plugins: [],
}
I created input.css:
#tailwind base;
#tailwind components;
#tailwind utilites;
Then created output.css and started the next command:
tailwindcss -i ./assets/css/input.css -o ./assets/css/output.css --watch
Every time i edit html.css tailwind css start rebuilding but doens't create the classes i wrote in html file.
How con i solve this?
Thank you
I tried to see some answers here on stackoverflow and but i didn't find any solution to my problem.
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 { ... }.
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.