I'm using Parcel through the API directly, via the following config:
import { Parcel } from '#parcel/core';
export default new Parcel({
entries: 'src/index.html',
defaultConfig: '#parcel/config-default'
});
I'm using a postcss.config.mjs and tailwind.config.mjs in order to initialize Tailwind, as seen below
// postcss.config.mjs
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
}
// tailwind.config.mjs
module.exports = {
content: ['./src/**/*.{html,js}'],
theme: {
extend: {}
},
plugins: [],
mode: 'jit'
};
...and importing tailwind into my project via an index.css file imported into index.html;
#tailwind base;
#tailwind components;
#tailwind utilities;
<!doctype html>
<html>
<head>
<link href="./index.css" type="text/css" rel="stylesheet">
</head>
<body class='bg-black'>
<script type='module' src='./index.js'></script>
</body>
</html>
and lastly my package.json (where I define the project as a module)
{
"type": "module",
"name": "app",
"source": "./src/index.html",
"dependencies": {
"autoprefixer": "10",
"parcel": "2",
"postcss": "8",
"tailwindcss": "3"
},
"alias": { "src": "./src" },
}
For some reason though, this won't build properly and my webpage has no styling.
I managed to make it work like this:
Change postcss.config.mjs to .postcssrc
// .postcssrc
{
"plugins": {
tailwindcss: {},
autoprefixer: {}
}
}
Change tailwind.config.mjs to tailwind.config.cjs
// tailwind.config.cjs
module.exports = {
content: [
"./src/**/*.{html,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
You use parcel like this: node build.mjs
// build.mjs
import {Parcel} from '#parcel/core';
let bundler = new Parcel({
entries: 'src/index.html',
defaultConfig: '#parcel/config-default',
serveOptions: {
port: 3000
},
hmrOptions: {
port: 3000
}
});
await bundler.watch();
Try it and lets see if it works for you as well.
Related
tw-imports.css
#tailwind base;
#tailwind components;
#tailwind utilities;
tailwind.config.js
const { createGlobPatternsForDependencies } = require('#nrwl/angular/tailwind');
const { join } = require('path');
module.exports = {
mode: 'jit',
content: [
join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
...createGlobPatternsForDependencies(__dirname),
],
darkMode: 'media',
theme: {
extend: {},
},
plugins: [],
};
postcsss.config.js
module.exports = {
plugins: [
'postcss-import',
'tailwindcss',
'postcss-flexbugs-fixes',
'postcss-nested',
'postcss-custom-properties',
'autoprefixer',
[
'postcss-preset-env',
{
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
features: {
'custom-properties': true,
'nesting-rules': true,
},
},
],
],
}
css
.button {
#apply rounded text-slate-500 ring-slate-900/5 shadow p-3 ring-2;
&:hover {
--mainColor: #b3a5c0;
color: var(--mainColor);
}
}
.storybook/main.js
module.exports = {
stories: [],
addons: [
'#storybook/addon-essentials',
{
name: '#storybook/addon-postcss',
options: {
postcssLoaderOptions: {
implementation: require('postcss'),
}
}
}
],
core: {
builder: 'webpack5',
},
// uncomment the property below if you want to apply some webpack config globally
webpackFinal: async (config, { configType }) => {
// Make whatever fine-grained changes you need that should apply to all storybook configs
// Return the altered config
return config;
},
};
result
Here is a postcss.config.js example from my most recent project. I am using tailwindcss/nesting which still wraps postcss-nested as explained here https://tailwindcss.com/docs/using-with-preprocessors#nesting
module.exports = {
plugins: {
"postcss-import": {},
"tailwindcss/nesting": {},
tailwindcss: {},
autoprefixer: {},
cssnano: {
preset: "default",
autoprefixer: { add: false },
},
},
}
I had a similar problem as you a while back, and package versions were important, so here is my package.json.
"devDependencies": {
"#tailwindcss/line-clamp": "^0.4.0",
"#tailwindcss/typography": "^0.5.2",
"autoprefixer": "^10.2.5",
"cssnano": "^4.1.11",
"postcss": "^8.4.14",
"postcss-cli": "^9.1.0",
"postcss-custom-media": "^7.0.8",
"postcss-import": "^14.1.0",
"postcss-nested": "^5.0.5",
"postcss-preset-env": "^6.7.0",
"tailwindcss": "^3.1.2"
}
This is TailwindCSS v3, and it looks like you may be using v2, but hopefully it is still useful.
How to write nested CSS with TailWind in Nuxt?
Tailwind recommends to not use preprocessors like Sass or less and recommends it's better to use postcss-nested and import...
I tried and searched too much to use it I couldn't
I only added this config to add css nesting ability as I searched
build: {
postcss: {
plugins: {
'postcss-import': true,
'tailwindcss/nesting': {},
'postcss-nested': {},
},
},
splitChunks: {
layouts: true
}
},
And this is my tailwind config file codes
module.exports = {
mode: 'jit',
darkMode: true, // or 'media' or 'class'
theme: {
extend: {
},
},
variants: {
extend: {},
},
purge: {
content: [
`components/**/*.{vue,js}`,
`layouts/**/*.vue`,
`pages/**/*.vue`,
`plugins/**/*.{js,ts}`,
`nuxt.config.{js,ts}`
]
},
plugins: [],
}
this is my package.json file I've installed these:
#nuxtjs/tailwindcss - postcss - postcss-import - postcss-nested
Now when I try to write nested CSS I get error
I want to be able to write nested in components and in seprate css files alongside tailwind!
In vue components style section I try to write like this:
<style lang="postcss" scoped>
.test {
color:blue;
.ok{
color:red;
}
}
</style>
But it doesn't work
I am using nextjs with tailwindcss and i am facing the difficulty in adding postcss-nesting to my nextjs app.
Here is the configuration below for the same :
next.config.js
const withPlugins = require("next-compose-plugins");
module.exports = withPlugins([], {});
postcss.config.js
module.exports = {
plugins: [
"postcss-import",
"tailwindcss",
"autoprefixer",
"tailwindcss/nesting",
"postcss-nested",
],
};
tailwind.config.js
module.exports = {
purge: {
enabled: true,
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./src/components/**/*.{js,ts,jsx,tsx}",
],
},
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
};
In my custom css file i am trying to use it like
.toolbar_navigation_items {
li {
#apply text-3xl;
}
}
then i am getting the error
"(2:3) Nested CSS was detected, but CSS nesting has not been configured correctly.
Please enable a CSS nesting plugin *before* Tailwind in your configuration.
NOTE : I also tried changing my postcss.config.js to
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss/nesting'),
require('tailwindcss'),
require('autoprefixer'),
]
}
as mentioned in the docs but it says
A PostCSS Plugin was passed as a function using require(), but it must be provided as a string.
I had same issue
install postcss-nesting: npm install -D postcss-nesting
postcss.config.js:
module.exports = {
plugins: {
"tailwindcss/nesting": "postcss-nesting",
tailwindcss: {},
autoprefixer: {},
},
};
https://tailwindcss.com/docs/using-with-preprocessors#nesting
Had same error. When used:
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss/nesting'),
require('tailwindcss'),
require('autoprefixer'),
]
}
Got this link: https://nextjs.org/docs/messages/postcss-shape
It shows how new config should be written (remove the require('package') function wrapping the strings). New postcss.config.js:
module.exports = {
plugins: [
'postcss-import',
'tailwindcss/nesting',
'tailwindcss',
'autoprefixer',
]
}
This fixed the nesting config issue for me.
Quote:
npm i sharp
# or
yarn add sharp
https://nextjs.org/docs/messages/install-sharp
I Generate a new project with nx using nextjs preset. Then with the help of the nx dev blog post i setup tailwind css like following
postcss.config.js
const { join } = require('path');
module.exports = {
plugins: {
tailwindcss: { config: './apps/storefront/tailwind.config.js' },
// tailwindcss: {
// config: join(__dirname, 'tailwind.config.js'),
// },
autoprefixer: {},
},
}
tailwind.config.js
const { createGlobPatternsForDependencies } = require('#nrwl/react/tailwind');
module.exports = {
purge: createGlobPatternsForDependencies(__dirname),
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
next.config.js
// eslint-disable-next-line #typescript-eslint/no-var-requires
const withNx = require('#nrwl/next/plugins/with-nx');
/**
* #type {import('#nrwl/next/plugins/with-nx').WithNxOptions}
**/
const nextConfig = {
nx: {
// Set this to true if you would like to to use SVGR
// See: https://github.com/gregberge/svgr
svgr: false,
},
};
module.exports = withNx(nextConfig);
But now if I run the apps, tailwind CSS does not seem to be laded in the app. So what am I doing wrong, and how can fix the issue?
In tailwind.config.js, you should change "purge" into "content" which recommends by the new release version of tailwindcss and also the path should config by starting from the root path. For example: content: ['./apps/blogs/pages/**/*.{js,ts,jsx,tsx}']
YR007 answer should be marked as the correct one, both postcss.config.js and tailwind.config.js should have root references if they are inside a monorepo app, for example:
postcss.config.js
module.exports = {
plugins: {
'tailwindcss/nesting': {},
tailwindcss: { config: './apps/backoffice/tailwind.config.js' },
autoprefixer: {},
},
};
tailwind.config.js
module.exports = {
content: [
'./apps/backoffice/index.html',
'./apps/backoffice/src/**/*.{vue,js,ts,jsx,tsx}',
],
darkMode: 'class',
theme: {
extend: {},
},
plugins: [],
};
**In Nx + Nextjs with tailwind some libs components are missing tailwindcss classes you can configure them like that in tailwind.config.js in Nextjs project **
you can point directly to libary
module.exports = {
content: [
join(__dirname, '**/*.{js,ts,jsx,tsx}'),
join('libs/ui/src/lib/**/*.{js,ts,jsx,tsx}'),
...createGlobPatternsForDependencies(__dirname),
],
}
There is a simple way for it's setup. Make a tailwind.config.js file at root and add this code
module.exports = {
mode: "jit",
purge: [
"./pages/**/*.{js,ts,jsx,tsx}",
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
Create a postcss.config.js file and make this
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
Then in your globals.css , simply import tailwind
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
and include this globals.css file in your app.js
So, if the classes work as expected the page is supposed to look like this:
But instead, it looks like this:
This is the code in the jsx file:
<header
className={"p-2 bg-red-500"}
>
<h1>{postData.title}</h1>
<p>{postData.date}</p>
<img
src={formatImgSrc(postData.thumbnail)}
/>
</header>
<div
className={"cms-content"}
dangerouslySetInnerHTML={
{ __html: postData.contentHtml }
}>
</div>
And here's the css file in /styles/globals.css:
#tailwind base;
#tailwind components;
#tailwind utilities;
.cms-content > p {
#apply mt-6 bg-red-500;
}
As you can see, the classes that I put on HTML don't get applied while those from the CSS file work just fine. I really don't understand why.
Here are more files for reference.
next.config.js
module.exports = {
webpack: (cfg) => {
cfg.module.rules.push(
{
test: /\.md$/,
loader: 'frontmatter-markdown-loader',
options: { mode: ['react-component'] }
}
)
return cfg;
}
}
postcss.config.js
module.exports = {
plugins: {
"#tailwindcss/jit": {},
autoprefixer: {},
}
}
tailwind.config.js
module.exports = {
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Try moving the .cms-content class above the #tailwind utilities import. Those imports go in order and you might be overriding your utilities. See this tailwind tutorial on creating your own classes: https://youtu.be/TrftauE2Vyk?t=127
add your folder this:
module.exports = {
purge: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./your_folder/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}'
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}