Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tailwind Pipeline #47

Open
SamTyurenkov opened this issue Oct 25, 2024 · 2 comments
Open

Tailwind Pipeline #47

SamTyurenkov opened this issue Oct 25, 2024 · 2 comments
Labels
question Further information is requested

Comments

@SamTyurenkov
Copy link

Hi there,

I am using Tailwind, and not sure how it uses postcss under the hood, but it's something like cli command probably.

		"tailwindcss": "3.4.9",
		"postcss": "^8.4.47",
		"postcss-cli": "^11.0.0",
		"postcss-extract-media-query": "^3.0.0",
		"postcss-import": "^16.1.0",
		"postcss-nesting": "^13.0.1",

So I am running:
npx tailwindcss -i ./styles/src/tailwind.css -o ./styles/dist/tailwind.css --watch=always --minify

And as per their documentation it uses the postcss.config.js somehow (I dont know how exactly, but plugins are being used in pipeline.)

const path = require( 'path' );

module.exports = {
	plugins: {
		'postcss-import': {},
		'tailwindcss/nesting': 'postcss-nesting',
		tailwindcss: {},
		autoprefixer: {},
		'postcss-extract-media-query': {
			output: {
				path: path.resolve( __dirname, 'styles/dist' ),
				name: '[name]-[query].[ext]', // pattern of emited files
			},
			queries: {
				'(min-width: 480px)': '480',
				'(min-width: 800px)': '800',
				'(min-width: 1024px)': '1024',
				'(min-width: 1600px)': '1600',
			},
			extractAll: false,
			stats: true,
			config: {
				plugins: {
					'postcss-extract-media-query': {},
					cssnano: {},
				},
			},
		},
		//cssnano: {},
	},
};

But specifically with postcss-extract-media-query I have few problems:

  1. original file is generated, but media queries is not stripped from it (similar to Not creating css file for all other styles  #44)
  2. if I change something in "queries" it still produces old queries as well. e.g. if I change '[name]-[query].[ext]' to '[query].[ext]' - both variations are generated. if I make another change, it generates 3 variants and so on. feels like it caches and appends to cache.

Thank you for your help!

@SamTyurenkov
Copy link
Author

SamTyurenkov commented Oct 25, 2024

Update:

  1. first time main css file is generated correctly, without the media queries. but as --watch option is triggered - subsequent executions are not affected
  2. I fixed cached files generation with npm cache clean --force

Updated config:

const path = require( 'path' );

module.exports = {
	plugins: {
		'postcss-import': {},
		'tailwindcss/nesting': 'postcss-nesting',
		//tailwindcss: {},
		autoprefixer: {},
		'postcss-extract-media-query': {
			output: {
				path: path.resolve( __dirname, 'styles/dist' ),
				name: '[name]-[query].[ext]', // pattern of emited files
			},
			queries: {
				'(min-width: 480px)': '480',
				'(min-width: 800px)': '800',
				'(min-width: 1024px)': '1024',
				'(min-width: 1600px)': '1600',
			},
			extractAll: false,
			stats: true,
			config: {
				plugins: {
					'postcss-extract-media-query': {},
					cssnano: {},
				},
			},
		},
		cssnano: {},
	},
};

@SassNinja
Copy link
Owner

Hi @SamTyurenkov

thanks for using my plugin!

and not sure how it uses postcss under the hood

tailwindcss itself is a postcss plugin

first time main css file is generated correctly, without the media queries. but as --watch option is triggered - subsequent executions are not affected

so your problem is only about the watch mode of tailwindcss cli ?

For further assistance please provide a simple setup to reproduce the issue (e.g. using codesandbox)

  • installed packages
  • example CSS files

@SassNinja SassNinja added the question Further information is requested label Oct 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants