78
rated 0 times
[
82]
[
4]
/ answers: 1 / hits: 9198
/ 3 Years ago, fri, june 4, 2021, 12:00:00
Problem Statement:
I have a nextjs project with tailwindcss. On the login page, the UI has the necessary classes available on the first page load, but if I refresh the page then the classes go away from the DOM and the UI is broken.
This is the deployed link to the site's login page
How to reproduce?
- open the above given link, you will observe the login form UI looks okay.
- Ctrl+R (Refresh the page), you will observe that the login UI is now broken
Code Files
tailwind.config.js
const colors = require('tailwindcss/colors')
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
purge: {
content:[
'./src/pages/**/*.js',
'./src/pages/**/*.ts',
'./src/pages/**/*.tsx',
'./src/design-system/**/*.js',
'./src/design-system/**/*.ts',
'./src/design-system/**/*.tsx',
'./src/components/**/*.js',
'./src/components/**/*.ts',
'./src/components/**/*.tsx'
],
// options: {whitelist:['h-52', 'py-9', 'max-w-2xl', 'text-white', 'h-screen']}
},
darkMode: false, // or 'media' or 'class'
theme: {
fontSize: {
'xxs': '10px',
'xs': '.75rem',
'sm': '.875rem',
'tiny': '.875rem',
'base': '1rem',
'lg': '1.125rem',
'xl': '1.25rem',
'2xl': '1.5rem',
'3xl': '1.875rem',
'4xl': '2.25rem',
'5xl': '3rem',
'6xl': '4rem',
'7xl': '5rem'
},
flex: {
1: '1 1 0%',
'30p': '0 0 30%',
auto: '1 1 auto',
initial: '0 1 auto',
inherit: 'inherit',
none: 'none',
2: '2 2 0%',
full: '0 0 100%',
half: '0 0 50%'
},
colors: {
white: colors.white,
gray: colors.trueGray,
indigo: colors.indigo,
green: colors.green,
red: colors.rose,
rose: colors.rose,
purple: colors.purple,
orange: colors.orange,
'light-blue': colors.lightBlue,
fuchsia: colors.fuchsia,
pink: colors.pink,
cyan: colors.cyan,
// NEW UI COLORS
'CD-blue': '#2357DE',
'CD-blue-accent': '#4770FF',
'CD-black-dark': '#1D1D1D',
'CD-black-dark-accent': '#202020',
'CD-black-medium-dark': '#242424',
'CD-black-extra-dark': '#1B1B1B',
'CD-black-light': '#2E2E2E',
'CD-gray': '#3E3E3E',
'CD-gray-accent': '#353535',
'CD-red-accent': '#FF745F',
'CD-yellow-accent': '#FFC167'
},
minHeight: {
0: '0',
'1/4': '25%',
'1/2': '50%',
'3/4': '75%',
full: '100%',
'90vh': '90vh'
},
minWidth: {
0: '0',
'1/4': '25%',
'1/2': '50%',
'3/4': '75%',
full: '100%',
'250px': '250px'
},
screens: {
xs: { min: '0px', max: '390px' },
...defaultTheme.screens
},
extend: {}
},
variants: {
extend: {}
},
plugins: []
}
login.jsx --> login UI's JSX
<div>
<div className="h-screen w-full flex justify-center items-center mx-auto max-w-2xl text-white">
<div className="w-full md:min-w-full bg-CD-black-dark-accent rounded px-8 mx-4 sm:px-16 py-10">
<div className="text-center mb-16">
<h1 className="text-3xl">Creator Login</h1>
</div>
<div className="space-y-4">
<Input
label="Enter username"
type="text"
placeholder="For e.g. noobmaster69"
value={username}
onChange={val => setUsername(val)}
data-testid="username"
/>
<div>
<Input
label="Password"
type="password"
placeholder="For e.g. **************"
value={password}
onChange={val => setPassword(val)}
data-testid="password"
/>
<p className="mt-2">
<a
className="text-xs text-CD-blue cursor-pointer font-semibold"
href="https://codedamn.com/contact"
tabIndex={1}>
Forgot Password?
</a>
</p>
</div>
<div>
<Button
label="Continue"
type="blue"
fullWidth
data-testid="login"
onClick={attemptUserLogin}
loading={busy}
disabled={busy}
/>
<p className="text-center my-4">
<a
className="text-xs cursor-pointer font-semibold"
href="https://codedamn.com/login"
tabIndex={1}>
Regular Login
</a>
</p>
</div>
</div>
</div>
</div>
<Head>
<title>Creator Login | codedamn</title>
</Head>
</div>
More From » reactjs
