Далее js не компилируется весь попутный ветер css clasess - PullRequest
Новая
       33

Далее js не компилируется весь попутный ветер css clasess

0 голосов
/ 10 февраля 2020

Я пытаюсь использовать Tailwind css в своем проекте Next js. Проблема в том, что некоторые классы, которые встроены в Tailwind Css, не работают (например, grid или active: псевдокласс).

У меня есть эта страница:

Index.jsx 

import React from "react";

const Index = () => (
  <div className="grid grid-cols-3 gap-4">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>
);
export default Index;

Отображает:

View without grid clasess

вместо:

View with grid clasess

Я настроил Next js на использование Tailwind css (используя только post css .config. js без Next css, поскольку post css уже в этой версии Next js v9.2.1)

post css .config. js

module.exports = {
  plugins: ["tailwindcss", "autoprefixer"]
};

и добавлено глобальное styles/main с: 

@tailwind base;
@tailwind components;
@tailwind utilities;

до _app.jsx примерно так:

pages / _app.jsx 

/* eslint-disable react/jsx-props-no-spreading */
import React from "react";
import App from "next/app";
import { Provider } from "react-redux";
import withRedux from "next-redux-wrapper";
import initStore from "../rx";
import "../styles/index.css";

// eslint-disable-next-line react/prop-types
const CustomApp = ({ Component, pageProps, store }) => (
  <Provider store={store}>
    <Component {...pageProps} />
  </Provider>
);

CustomApp.getInitialProps = async appContext => {
  const appProps = await App.getInitialProps(appContext);

  return { ...appProps };
};

export default withRedux(initStore)(CustomApp);

(игнорировать реализацию с избыточностью)

Как видите, некоторые классы компилируются, а некоторые нет, когда я захожу в консоль разработчика и ищу grid, класса с таким именем не существует. Что я делаю не так в конфигурации?

...