Error postcss plugin tailwindcss requires postcss 8

Integration guides

Installing Tailwind CSS can be a slightly different process depending on what other frameworks/tools you’re using, so we’ve put together a bunch of guides that cover popular setups.

Don’t see your favorite tool in the list? We’re always working on new guides, but in the mean time you can follow the instructions for installing Tailwind CSS as a PostCSS plugin instead to get set up in no time.

Installing Tailwind CSS as a PostCSS plugin

Tailwind CSS requires Node.js 12.13.0 or higher.

For most real-world projects, we recommend installing Tailwind as a PostCSS plugin. Most modern frameworks use PostCSS under the hood already, and there’s a good chance you’ve used or are currently using other PostCSS plugins like autoprefixer.

If you’ve never heard of PostCSS or are wondering how it’s different from tools like Sass, read our guide on using PostCSS as your preprocessor for an introduction.

If this is a bit over your head and you’d like to try Tailwind without configuring PostCSS, read our instructions on using Tailwind CLI instead.

Install Tailwind via npm

For most projects (and to take advantage of Tailwind’s customization features), you’ll want to install Tailwind and its peer-dependencies via npm.

Since Tailwind does not automatically add vendor prefixes to the CSS it generates, we recommend installing autoprefixer to handle this for you like we’ve shown in the snippet above.

If you’re integrating Tailwind with a tool that relies on an older version of PostCSS, you may see an error like this:

In this case, you should install the PostCSS 7 compatibility build instead.

Add Tailwind as a PostCSS plugin

Add tailwindcss and autoprefixer to your PostCSS configuration. Most of the time this is a postcss.config.js file at the root of your project, but it could also be a .postcssrc file, or postcss key in your package.json file.

If you aren’t sure where PostCSS plugins are configured for the tools you’re using, you’ll want to refer to the documentation for those tools to learn where this should go. A search for “configure postcss {my tool}” will get you the answer pretty fast, too.

If you’re using any other PostCSS plugins, you should read our documentation on using PostCSS as your preprocessor for more details about the best way to order them with Tailwind.

Create your configuration file

If you’d like to customize your Tailwind installation, generate a config file for your project using the Tailwind CLI utility included when you install the tailwindcss npm package:

This will create a minimal tailwind.config.js file at the root of your project:

Learn more about configuring Tailwind in the configuration documentation.

Include Tailwind in your CSS

Create a CSS file if you don’t already have one, and use the @tailwind directive to inject Tailwind’s base, components, and utilities styles:

Tailwind will swap these directives out at build-time with all of the styles it generates based on your configured design system.

If you’re using postcss-import (or a tool that uses it under the hood, such as Webpacker for Rails), use our imports instead of the @tailwind directive to avoid issues when importing any of your own additional files:

If you’re working in a JavaScript framework like React or Vue that supports directly importing CSS files into your JS, you can also skip creating a CSS file altogether and import tailwindcss/tailwind.css instead which has all of these directives already in place:

Building your CSS

How you actually build your project will depend on the tools that you’re using. Your framework may include a command like npm run dev to start a development server that compiles your CSS in the background, you may be running webpack yourself, or maybe you’re using postcss-cli and running a command like postcss styles.css -o compiled.css.

If you’re already familiar with PostCSS you probably know what you need to do, if not refer to the documentation for the tool you are using.

When building for production, be sure to configure the purge option to remove any unused classes for the smallest file size:

Read our separate guide on optimizing for production to learn more about tree-shaking unused styles for best performance.

If you’re integrating Tailwind with a tool that relies on an older version of PostCSS, you may see an error like this when trying to build your CSS:

In this case, you should switch to our PostCSS 7 compatibility build instead.

Using Tailwind CLI

Tailwind CSS requires Node.js 12.13.0 or higher.

If you’d like to compile your CSS with Tailwind without integrating it directly into any sort of build tooling, you can use the Tailwind CLI tool to generate your CSS without configuring PostCSS or even installing Tailwind as a dependency if you don’t want to.

Use npx which is a tool that is automatically installed alongside npm to generate a fully compiled Tailwind CSS file:

This will create a file called tailwind.css generated based on Tailwind’s default configuration, and automatically add any necessary vendor prefixes using autoprefixer.

Now you can pull this file into your HTML just like any other stylesheet:

Watching for changes

You can use the --watch or -w flag to start a watch process and automatically rebuild your CSS any time you make any changes:

Using a custom CSS file

If you’d like to process any custom CSS alongside the default styles Tailwind generates, create a CSS file wherever you normally would and use the @tailwind directive to include Tailwind’s base, components, and utilities styles:

Then include the path to that file when building your CSS:

Read about adding base styles, extracting components, and adding new utilities to learn more about adding custom CSS on top of Tailwind.

Customizing your configuration

If you’d like to customize what Tailwind generates, create a tailwind.config.js file using the Tailwind CLI tool:

This will create a minimal tailwind.config.js file at the root of your project:

This file will automatically be read when building your CSS with Tailwind CLI:

If you’d like to keep your config file in a different location or give it a different name, pass the config file path using the -c option when building your CSS:

Learn more about configuring Tailwind in the configuration documentation.

Disabling Autoprefixer

By default, the Tailwind CLI tool will run your CSS through Autoprefixer to add any necessary vendor prefixes. If you already have Autoprefixer set up in your build pipeline somewhere further down the chain, you can disable it in the Tailwind CLI tool using the --no-autoprefixer flag to avoid running it twice:

Using a custom PostCSS configuration

If you’d like to use other PostCSS plugins alongside Tailwind, you can create a postcss.config.js file in your project root to add your extra plugins and Tailwind will include them if you use the --postcss flag when building your CSS:

By default, plugins are applied after Tailwind generates your CSS. If you have plugins that need to run before Tailwind, just include tailwindcss in your plugin list and Tailwind CLI will detect it and respect your custom plugin order:

If you’d like to automatically generate a basic postcss.config.js file when creating your tailwind.config.js file, use the --postcss or -p flag when initializing your config file:

Building for production

When building for production, set NODE_ENV=production on the command line when building your CSS:

This will make sure Tailwind removes any unused CSS for best performance. Read our separate guide on optimizing for production to learn more.

You can also use the --minify flag to compress your CSS with cssnano:

Using Tailwind via CDN

Before using the CDN build, please note that many of the features that make Tailwind CSS great are not available without incorporating Tailwind into your build process.

To get the most out of Tailwind, you really should install it as a PostCSS plugin.

To pull in Tailwind for quick demos or just giving the framework a spin, grab the latest default configuration build via CDN:

Note that while the CDN build is large (72.8kB compressed, 2936.0kB raw), it’s not representative of the sizes you see when including Tailwind as part of your build process.

Sites that follow our best practices are almost always under 10kb compressed.

HTML starter template

For Tailwind’s styles to work as expected, you’ll want to use the HTML5 doctype and include the responsive viewport meta tag to properly handle responsive styles on all devices.

Many front-end frameworks like Next.js, vue-cli and others do all this for you behind the scenes automatically, so depending on what you’re building you might not need to set this up.

PostCSS 7 compatibility build

As of v2.0, Tailwind CSS depends on PostCSS 8. Because PostCSS 8 is only a few months old, many other tools in the ecosystem haven’t updated yet, which means you might see an error like this in your terminal after installing Tailwind and trying to compile your CSS:

To help bridge the gap until everyone has updated, we also publish a PostCSS 7 compatibility build as @tailwindcss/postcss7-compat on npm.

If you run into the error mentioned above, uninstall Tailwind and re-install using the compatibility build instead:

The compatibility build is identical to the main build in every way, so you aren’t missing out on any features or anything like that.

Once the rest of your tools have added support for PostCSS 8, you can move off of the compatibility build by re-installing Tailwind and its peer-dependencies using the latest tag:

[Solved] Error: PostCSS plugin tailwindcss requires PostCSS 8

Hello Guys, How are you all? Hope You all Are Fine. Today As I Installed tailwindcss And just after installing I am Facing the following error Error: PostCSS plugin tailwindcss requires PostCSS 8 in nodeJs. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

How Error: PostCSS plugin tailwindcss requires PostCSS 8 Error Occurs ?

Today As I Installed tailwindcss And just after installing I am Facing the following error.

How To Solve Error: PostCSS plugin tailwindcss requires PostCSS 8 ?

1. How To Solve Error: PostCSS plugin tailwindcss requires PostCSS 8 ?

To Solve Error: PostCSS plugin tailwindcss requires PostCSS 8 Just uninstall Tailwind and re-install using the compatibility build instead. Once the rest of your tools have added support for PostCSS 8, you can move off of the compatibility build by re-installing Tailwind and its peer-dependencies using the latest tag.
Error: PostCSS plugin tailwindcss requires PostCSS 8

To Solve Error: PostCSS plugin tailwindcss requires PostCSS 8 Just uninstall Tailwind and re-install using the compatibility build instead. Once the rest of your tools have added support for PostCSS 8, you can move off of the compatibility build by re-installing Tailwind and its peer-dependencies using the latest tag.

Solution 1

Just uninstall Tailwind and re-install using the compatibility build instead:

The compatibility build is identical to the main build in every way, so you aren’t missing out on any features or anything like that.

Once the rest of your tools have added support for PostCSS 8, you can move off of the compatibility build by re-installing Tailwind and its peer-dependencies using the latest tag:

Solution 2

This command worked for me.

Solution 3

Solution 4

The solution below should work perfectly. Run the following commands

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?

Источник

PostCSS plugin postcss-nested requires PostCSS 8 #2799

Describe the problem:

When I upgraded Tailwind CSS to the version 2.0.1 inside my Next.js 10.0.2 (which should come with PostCSS 8, because Autoprefixer v10 works) project, it throw:

The text was updated successfully, but these errors were encountered:

If using Next.js 10.0.2, ./node_modules/next/node_modules/postcss will be 8.1.7.
Probably, postcss-nested uses ./node_modules/postcss .

You can get around this by installing PostCSS 8 in your own project, but I don’t think it’s a fundamental solution.

@dqn it worked, but as you said, there should be a better solution

I just ran into the same problem.

I just ran into the same problem.

thanks it works

Note in case it helps anyone. if you get errors with the Postcss 7 npm installation above, try prefixing the ^ wildcard characters with a backslash — eg
npm install tailwindcss@compat postcss@^7 autoprefixer@^9

Using Next.js 10, I was able to install tailwindcss@compat and left the other plugins (like Autoprefixer) in their only-postcss8 version.

For compatibility with postcss v7, install these:

Also if you are using nextjs, install these too:

postcss-flexbugs-fixes released v5 recently supporting postcss 8. So we still need v4 for compatibilty.

In short:
yarn add tailwindcss@compat postcss@^7 autoprefixer@^7 postcss-flexbugs-fixes@^4 postcss-preset-env .

For Next.js 10 you don’t need the compatibility build, install Tailwind like this:

PostCSS and Autoprefixer need to be peer-dependencies as of PostCSS 8.

You can get around this by installing PostCSS 8 in your own project, but I don’t think it’s a fundamental solution.

It’s why we include postcss and autoprefixer in the installation instructions.

i got this too, I can come from @zeit/next-css let’s check for it. I removed it

I followed the steps in post-css-7-compatibility-build to upgrade tailwind to v2.x with vue 3 and it fails, it always raises that error.

@boussadjra Please open a new issue that includes a link to a GitHub repo that reproduces the problem.

Vue 3 works for me with the PostCSS 7 compatible install.

It doesn’t find plugins though

neither did other plugins like typography nor if I use npm:@tailwindcss

@StephanSchmidt please try to open a new issue where you put a link to reproduction repository

Hi,
Downgrade your autoprefixer to version 9, use

Do we still need to use postcss-flexbug-fixes along with tailwindcss? I’m using ejected create-react-app and want to add Tailwind in styleLoaders. My code is like below

even if I commented those other plugins, all just running well. But I’m afraid something will break.

@muhsalaa Not if you’re using tailwindcss version 2, IE support has been dropped. The bugs that was trying to fix don’t affect the latest browsers. You can checkout the affected browsers here: https://github.com/philipwalton/flexbugs

For compatibility with postcss v7, install these:

Also if you are using nextjs, install these too:

postcss-flexbugs-fixes released v5 recently supporting postcss 8. So we still need v4 for compatibilty.

In short:
yarn add tailwindcss@compat postcss@^7 autoprefixer@^7 postcss-flexbugs-fixes@^4 postcss-preset-env .

It is work for me.
My dependency list is as below.

Источник

PostCSS plugin tailwindcss requires PostCSS 8. #2854

Either the corresponding version installed or the latest version will still report an error

Beta Was this translation helpful? Give feedback.

16 You must be logged in to vote

I had the same thing with Vue 3 today. Solve it with the below.

<>’s edit

<>’s edit

when I did with yarn I received

Then some errors disapear.

You need to have

Beta Was this translation helpful? Give feedback.

4 You must be logged in to vote

thanks! solved for me adding postcss-loader

Beta Was this translation helpful? Give feedback.

<>’s edit

<>’s edit

I had the same thing with Vue 3 today. Solve it with the below.

Beta Was this translation helpful? Give feedback.

Marked as answer

29 You must be logged in to vote

Thanks. This worked for me !!

Beta Was this translation helpful? Give feedback.

This fixed my problem. Thank you so so much

Beta Was this translation helpful? Give feedback.

I had the same thing with Vue 3 today. Solve it with the below.

I don’t want to downgrade tailwindCSS to version 2.

Beta Was this translation helpful? Give feedback.

Beta Was this translation helpful? Give feedback.

Thanks! Now everything is working smoothly 👍🏾

Beta Was this translation helpful? Give feedback.

I got the flooring error when I ran

Beta Was this translation helpful? Give feedback.

5 You must be logged in to vote

npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 —force

Beta Was this translation helpful? Give feedback.

Hmm. Any possible negative unintended consequences from adding «—force»?

Beta Was this translation helpful? Give feedback.

This post #3575 suggests the possible need to escape ^ by adding before each instance, so the revised code would be:

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Beta Was this translation helpful? Give feedback.

2 You must be logged in to vote

plus —force at the end, if you are so inclined

Beta Was this translation helpful? Give feedback.

<>’s edit

<>’s edit

Well, I decided to try the proposed solution and tried npm uninstall tailwindcss postcss autoprefixer per tailwind docs,

then npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 —force

which resulted in this error:

BTW, I’m using Vue 3.

From my package.json, after running the above:

Beta Was this translation helpful? Give feedback.

Источник

Установка

Узнайте, как запустить Tailwind CSS в своем проекте.

Руководства по интеграции

Процесс установки Tailwind CSS может немного отличаться в зависимости от того, какие другие фреймворки/инструменты вы используете, поэтому мы составили несколько руководств, которые охватывают популярные настройки.

Не видите свой любимый инструмент в списке? Мы постоянно работаем над новыми руководствами, но пока вы можете следовать инструкциям по установке Tailwind CSS в качестве плагина PostCSS вместо этого, чтобы получить настроен в кратчайшие сроки.

Установка Tailwind CSS в качестве плагина PostCSS

Tailwind CSS требует Node.js 12.13.0 или выше.

Для большинства реальных проектов мы рекомендуем установить Tailwind как плагин PostCSS. Большинство современных фреймворков уже используют PostCSS под капотом, и есть большая вероятность, что вы использовали или в настоящее время используете другие плагины PostCSS, такие как autoprefixer.

Если вы никогда не слышали о PostCSS или вам интересно, чем он отличается от таких инструментов, как Sass, прочтите наше руководство по использованию PostCSS в качестве препроцессора для введения.

Если это кажется вам непосильным и вы хотите попробовать Tailwind без настройки PostCSS, прочтите вместо этого наши инструкции по применению Tailwind CLI.

Установить Tailwind через npm

Для большинства проектов (и для того, чтобы воспользоваться возможностями настройки Tailwind), вам нужно установить Tailwind и его одноранговые зависимости через npm.

Поскольку Tailwind не добавляет автоматически префиксы поставщиков в создаваемый им CSS, мы рекомендуем установить autoprefixer для решения этой проблемы для Вас, как мы показали в приведенном выше фрагменте.

Если вы интегрируете Tailwind с инструментом, основанным на более старой версии PostCSS, вы можете увидеть такую ошибку:

Добавить Tailwind как плагин PostCSS

Добавьте tailwindcss и autoprefixer в Вашу конфигурацию PostCSS. В большинстве случаев это файл postcss.config.js в корне Вашего проекта, но это также может быть файл .postcssrc или ключ postcss в Вашем файле package.json .

Если вы не уверены, где настраиваются плагины PostCSS для используемых Вами инструментов, вам нужно обратиться к документации по этим инструментам, чтобы узнать, где это должно происходить. Поиск по запросу “configure postcss ” тоже даст вам ответ довольно быстро.

Если вы используете какие-либо другие плагины PostCSS, вам следует прочитать нашу документацию по использованию PostCSS в качестве препроцессора для получения более подробной информации о том, как лучше всего заказать их с помощью Tailwind.

Создайте свой файл конфигурации

Если вы хотите настроить установку Tailwind, сгенерируйте файл конфигурации для своего проекта с помощью утилиты Tailwind CLI, включенной при установке пакета npm tailwindcss :

Это создаст минимальный файл tailwind.config.js в корне Вашего проекта:

Узнайте больше о настройке Tailwind в документации по конфигурации.

Включите Tailwind в свой CSS

Создайте файл CSS, если у вас его еще нет, и используйте директиву @tailwind для внедрения стилей Tailwind base , components и utilities :

Tailwind заменит эти директивы во время сборки на все стили, которые он генерирует на основе Вашей настроенной дизайн-системы.

Если вы используете postcss-import (или инструмент, который использует его под капотом, например Webpacker для Rails), используйте наш импорт вместо директивы @tailwind , чтобы избежать проблем при импорте любых Ваших собственных дополнительных файлов:

Если вы работаете в среде JavaScript, такой как React или Vue, которая поддерживает прямой импорт файлов CSS в ваш JS, вы также можете полностью отказаться от создания файла CSS и вместо этого импортировать tailwindcss/tailwind.css , в котором все эти директивы уже есть в место:

Создание Вашего CSS

То, как вы на самом деле создаете свой проект, будет зависеть от инструментов, которые вы используете. Ваша структура может включать команду типа npm run dev для запуска сервера разработки, который компилирует ваш CSS в фоновом режиме, вы можете запускать webpack самостоятельно, или, может быть, вы используете postcss-cli и запускаете такую команду, как postcss styles.css -o compiled.css .

Если вы уже знакомы с PostCSS, Вы, вероятно, знаете, что вам нужно делать, если не обратитесь к документации для инструмента, который вы используете.

При сборке для производства не забудьте настроить опцию purge , чтобы удалить все неиспользуемые классы для файла наименьшего размера:

Прочтите наше отдельное руководство по оптимизации для производства, чтобы узнать больше о древовидных неиспользуемых стилях для лучшей производительности.

Если вы интегрируете Tailwind с инструментом, основанным на более старой версии PostCSS, вы можете увидеть такую ошибку при попытке создать свой CSS:

Использование Tailwind CLI

Tailwind CSS требует Node.js 12.13.0 или выше.

Если вы хотите скомпилировать свой CSS с помощью Tailwind, не интегрируя его напрямую в какие-либо инструменты сборки, вы можете использовать инструмент Tailwind CLI для создания своего CSS без настройки PostCSS или даже установки Tailwind в качестве зависимости, если вы не хотите .

Используйте npx , инструмент, который автоматически устанавливается вместе с npm , чтобы сгенерировать полностью скомпилированный файл CSS Tailwind:

Это создаст файл с именем tailwind.css , сгенерированный на основе конфигурации Tailwind по умолчанию, и автоматически добавит любого необходимого поставщика префиксов с использованием autoprefixer.

Теперь вы можете вставить этот файл в свой HTML, как и любую другую таблицу стилей:

Следите за изменениями

Вы можете использовать флаг —watch или -w , чтобы запустить процесс просмотра и автоматически перестраивать свой CSS каждый раз, когда вы вносите какие-либо изменения:

Использование собственного файла CSS

Если вы хотите обрабатывать любой пользовательский CSS вместе со стилями по умолчанию, которые генерирует Tailwind, создайте файл CSS в любом месте и используйте директиву @tailwind для включения стилей Tailwind base , components и utilities :

Затем укажите путь к этому файлу при создании CSS:

Прочтите о добавлении базовых стилей, извлечении компонентов, и добавлении новых утилит, чтобы узнать больше о добавлении пользовательского CSS поверх Tailwind.

Настройка Вашей конфигурации

Если вы хотите настроить то, что генерирует Tailwind, создайте файл tailwind.config.js с помощью инструмента Tailwind CLI:

Это создаст минимальный файл tailwind.config.js в корне Вашего проекта:

Этот файл будет автоматически прочитан при создании вашего CSS с помощью Tailwind CLI:

Если вы хотите сохранить файл конфигурации в другом месте или дать ему другое имя, передайте путь к файлу конфигурации, используя параметр -c при создании CSS:

Узнайте больше о настройке Tailwind в документации по конфигурации.

Отключение Autoprefixer

По умолчанию инструмент Tailwind CLI будет запускать ваш CSS через Autoprefixer для добавления любых необходимых префиксов поставщиков. Если у вас уже есть Autoprefixer, настроенный в конвейере сборки где-то дальше по цепочке, вы можете отключить его в инструменте Tailwind CLI с помощью флага —no-autoprefixer , чтобы не запускать его дважды:

Использование пользовательской конфигурации PostCSS

Если вы хотите использовать другие плагины PostCSS вместе с Tailwind, вы можете создать файл postcss.config.js в корне вашего проекта, чтобы добавить дополнительные плагины, и Tailwind будет включать их, если вы используете флаг —postcss , когда создание вашего CSS:

По умолчанию плагины применяются после того, как Tailwind сгенерирует ваш CSS. Если у вас есть плагины, которые необходимо запустить до Tailwind, просто включите tailwindcss в свой список плагинов, и интерфейс командной строки Tailwind обнаружит его и соблюдает ваш собственный порядок плагинов:

Если вы хотите автоматически сгенерировать базовый файл postcss.config.js при создании файла tailwind.config.js , используйте флаг —postcss или -p при инициализации файла конфигурации:

Сборка для продакшена

При сборке для продакшена установите NODE_ENV=production в командной строке при сборке CSS:

Это гарантирует, что Tailwind удалит все неиспользуемые CSS для лучшей производительности. Прочтите наше отдельное руководство по оптимизации для продакшена, чтобы узнать больше.

Вы также можете использовать флаг —minify для сжатия вашего CSS с помощью cssnano:

Использование Tailwind через CDN

Перед использованием сборки CDN обратите внимание, что многие функции, которые делают Tailwind CSS отличным, недоступны без включения Tailwind в процесс сборки.

вы не можете настроить тему по умолчанию Tailwind

вы не можете использовать такие директивы, как @apply , @variants и т.д.

вы не можете включить дополнительные варианты, например group-focus

вы не можете устанавливать сторонние плагины

вы не можете избавиться от неиспользуемых стилей

Чтобы получить максимальную отдачу от Tailwind, вам действительно следует установить его как плагин PostCSS.

Чтобы использовать Tailwind для быстрых демонстраций или просто попробовать фреймворк, загрузите последнюю сборку конфигурации по умолчанию через CDN:

NotОбратите внимание, что, хотя сборка CDN велика ( 72.8kB в сжатом виде, 2936.0kB в исходном), она не соответствует размерам, которые вы видите при включении Tailwind как части процесса сборки..

Сайты, которые следуют нашим лучшим практикам, почти всегда имеют после сжатия менее 10КБ.

HTML стартовый шаблон

Чтобы стили Tailwind работали должным образом, вы захотите использовать тип документа HTML5 и включить метатег адаптивного окна просмотра для правильной обработки адаптивных стилей на всех устройствах.

Многие интерфейсные фреймворки, такие как Next.js, vue-cli и другие, делают все это за вас за кулисами автоматически, поэтому в зависимости от того, что вы создаете, Вам, возможно, не нужно это настраивать.

Сборка совместимости с PostCSS 7

Начиная с версии 2.0, Tailwind CSS зависит от PostCSS 8. Поскольку PostCSS 8 всего несколько месяцев, многие другие инструменты в экосистеме еще не обновлены, что означает, что вы можете увидеть такую ошибку в своем терминале после установки Tailwind и пытаемся скомпилировать ваш CSS:

Чтобы сократить разрыв до тех пор, пока все не обновятся, мы также публикуем сборку совместимости с PostCSS 7 как @tailwindcss/postcss7-compat на npm.

Если вы столкнулись с упомянутой выше ошибкой, удалите Tailwind и переустановите его, используя вместо этого сборку совместимости:

Сборка совместимости идентична основной сборке во всех отношениях, поэтому вы не упускаете ни одной функции или чего-либо в этом роде.

После того, как остальные Ваши инструменты добавят поддержку PostCSS 8, вы можете отказаться от сборки совместимости, переустановив Tailwind и его одноранговые зависимости, используя тег latest :

Источник