Question 235299 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – react-tailwindcss-datepicker not showing correctly in NextJS project

I’m relatively new to nextjs and tailwind and am trying to use react-tailwindcss-datepicker in my nextjs project and it’s not rendering correctly. It looks like the styling is not working. Any and all help is appreciated. I don’t know where to start to try to figure this out.

This is what it looks like:

enter image description here

The desired result is this:
enter image description here

I’ve tried the solution mentioned here where it mentions mui and tailwind do not play well together so I have removed all of my mui packages.

here is my tailwind.config.js where I’ve added the adjustments per the docs:

// tailwind.config.js
// tailwind.config.js
/** @type {import('tailwindcss').Config} */

module.exports = {
    mode: 'jit',
    purge: ['./pages/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {
            colors: {
                primary: '#228B22', // Hexadecimal value for forest green
                // ...
            },
        },
    },
    variants: {
        extend: {},
    },
    plugins: [
        require('@tailwindcss/forms')
    ],
    content: [
        // "./src/**/*.{js,jsx,ts,tsx}",
        "./app/**/*.{js,ts,jsx,tsx,mdx}",
        "./pages/**/*.{js,ts,jsx,tsx,mdx}",
        "./components/**/*.{js,ts,jsx,tsx,mdx}",
        "./node_modules/react-tailwindcss-datepicker/dist/index.esm.js"],
};

here is my package.json:

"dependencies": {
    "@emotion/react": "^11.11.0",
    "@emotion/styled": "^11.11.0",
    "@fontsource/roboto": "^5.0.1",
    "@heroicons/react": "^2.0.18",
    "@react-google-maps/api": "^2.18.1",
    "autoprefixer": "^10.4.14",
    "dayjs": "^1.11.9",
    "mapbox-gl": "^2.15.0",
    "mapbox-gl-supported": "^1.2.0",
    "next": "13.3.0",
    "postcss": "^8.4.27",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-google-autocomplete": "^2.7.3",
    "react-icons": "^4.10.1",
    "react-map-gl": "^7.0.25",
    "react-tailwindcss-datepicker": "^1.6.6",
    "styled-components": "^5.3.10",
    "swr": "^2.2.1",
    "tailwindcss": "^3.3.3",
    "use-places-autocomplete": "^4.0.0"

here is my globals.css:


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

Outside of that, I can’t figure it out. here are my DatePicker component:

import React, {useState} from "react";
import Datepicker from "react-tailwindcss-datepicker";


const DatePickerComponent = () => {

    const [value, setValue] = useState({
        startDate: null,
        endDate: null
    });

    const handleValueChange = (newValue) => {
        console.log("newValue:", newValue);
        setValue(newValue);

    }

    return (
        <Datepicker
            useRange={false}
            value={value}
            onChange={handleValueChange}

        />

    );
};
export default DatePickerComponent;

i also have a layout wrapping my _app component that acts as a header

_app component

import '@/styles/globals.css'
import Layout2 from '@/components/layout/Layout2'
import Head from 'next/head';
import {Fragment} from "react";


export default function App({Component, pageProps}) {
    return (
        <Fragment>
            <Head>
                {/*<link rel="stylesheet" href="https://example.com/path/to/library.css"/>*/}

                {/*<script src="
https://cdn.jsdelivr.net/npm/[email protected]/dist/index.cjs.min.js
"></script>*/}
            </Head>
            <Layout2>
                <Component {...pageProps} /> // component is in here but several props down!
            </Layout2>
        </Fragment>
    )
}

here’s my layout2 component:

import {Fragment} from "react";
import MainHeader from "@/components/layout/MainHeader";


export default function Layout2(props) {
    return (
        <Fragment>

            <MainHeader/>


            <main className='pt-20'>
                {props.children}
            </main>
        </Fragment>
    );
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So it turns out it was this line below in my tailwind.config.js. TBH, I don't know what this line does yet so I'll be looking at that tonight. I have no clue where I copied it from.

    I ended up creating a new project and tried to implement the react-tailwindcss-datepicker per their read-me in both JS and TS projects just to be sure and it worked in both of them.

    Once I took a look at the tailwind.config file in the new projects and then started commenting out the lines in my project line by line and it turns out it was this line that did it.

        // purge: ['./pages/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'], <--- culprit

    I hope this helps someone in the future.


  2. 0

    it looks like you didn’t add tailwindcss correctly to your project, since you’re using Nextjs this is how your tailwindcss.config.js file should look like:

    /** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",

// Or if using `src` directory:
"./src/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {},
},
plugins: [],
}

    also don’t forget to add to globals.css

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

    https://tailwindcss.com/docs/guides/nextjs

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search