zackify · zackify · Jul 13, 2021 · Jul 8, 2021 · Jul 8, 2021
diff --git a/README.md b/README.md
@@ -88,6 +88,14 @@ No problem! The library includes the minimal CSS required to render the componen
 import '@zach.codes/react-calendar/dist/calendar-tailwind.css';
 ```
 
+If you already have a CSS reset in your app, you can import from:
+
+```js
+import '@zach.codes/react-calendar/dist/calendar-tailwind-no-reset.css';
+```
+
+But some styles may not look the same as storybook. You can take the resets you want from the main file and put them into your app to get the styling you prefer.
+
 ## MonthlyCalendar
 
 This is a monthly view similar to react-big-calendar or a Calendar application. It makes it easy to load events 1 month at a time, and render custom elements on each day.

diff --git a/package.json b/package.json
@@ -1,12 +1,13 @@
 {
-  "version": "0.2.0",
+  "version": "0.3.0-beta",
   "license": "MIT",
   "name": "@zach.codes/react-calendar",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "files": [
     "dist",
-    "src"
+    "src",
+    "tw-check.js"
   ],
   "engines": {
     "node": ">=10"
@@ -15,13 +16,14 @@
     "start": "tsdx watch",
     "build": "tsdx build && npm run build-tailwind",
     "test": "tsdx test",
+    "postinstall": "node tw-check.js",
     "lint": "tsdx lint",
     "prepare": "tsdx build && npm run build-tailwind",
     "size": "size-limit",
     "analyze": "size-limit --why",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
-    "build-tailwind": "NODE_ENV=production tailwindcss build src/tailwind.css -o dist/calendar-tailwind.css"
+    "build-tailwind": "NODE_ENV=production tailwindcss build src/tailwind.css -o dist/calendar-tailwind.css && NODE_ENV=production TW_PREFLIGHT=false tailwindcss build src/tailwind.css -o dist/calendar-tailwind-no-reset.css"
   },
   "peerDependencies": {
     "date-fns": ">=2",
@@ -90,4 +92,4 @@
       "\\.(css|less|scss|sass)$": "identity-obj-proxy"
     }
   }
-}
+}
diff --git a/src/Monthly/MonthlyBody.tsx b/src/Monthly/MonthlyBody.tsx
@@ -49,11 +49,11 @@ export const handleOmittedDays = ({
 
 //to prevent these from being purged in production, we make a lookup object
 const headingClasses = {
-  l3: 'lg:grid-cols-3',
-  l4: 'lg:grid-cols-4',
-  l5: 'lg:grid-cols-5',
-  l6: 'lg:grid-cols-6',
-  l7: 'lg:grid-cols-7',
+  l3: 'lg:rc-grid-cols-3',
+  l4: 'lg:rc-grid-cols-4',
+  l5: 'lg:rc-grid-cols-5',
+  l6: 'lg:rc-grid-cols-6',
+  l7: 'lg:rc-grid-cols-7',
 };
 
 type MonthlyBodyProps<DayData> = {
@@ -78,11 +78,12 @@ export function MonthlyBody<DayData>({
     locale,
   });
 
-  let headingClassName = 'border-b-2 p-2 border-r-2 lg:block hidden';
+  let headingClassName =
+    'rc-border-b-2 rc-p-2 rc-border-r-2 lg:rc-block rc-hidden';
   return (
-    <div className="bg-white border-l-2 border-t-2">
+    <div className="rc-bg-white rc-border-l-2 rc-border-t-2">
       <div
-        className={`grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 ${
+        className={`rc-grid rc-grid-cols-1 sm:rc-grid-cols-2 md:rc-grid-cols-4 ${
           //@ts-ignore
           headingClasses[`l${headings.length}`]
         }`}
@@ -130,13 +131,15 @@ export function MonthlyDay<DayData>({ renderDay }: MonthlyDayProps<DayData>) {
   return (
     <div
       aria-label={`Events for day ${dayNumber}`}
-      className="h-48 p-2 border-b-2 border-r-2"
+      className="rc-h-48 rc-p-2 rc-border-b-2 rc-border-r-2"
     >
-      <div className="flex justify-between">
-        <div className="font-bold">{dayNumber}</div>
-        <div className="lg:hidden block">{format(day, 'EEEE', { locale })}</div>
+      <div className="rc-flex rc-justify-between">
+        <div className="rc-font-bold">{dayNumber}</div>
+        <div className="lg:rc-hidden rc-block">
+          {format(day, 'EEEE', { locale })}
+        </div>
       </div>
-      <ul className="divide-gray-200 divide-y overflow-hidden max-h-36 overflow-y-auto">
+      <ul className="rc-divide-gray-200 rc-divide-y rc-overflow-hidden rc-max-h-36 rc-overflow-y-auto">
         {renderDay(events)}
       </ul>
     </div>

diff --git a/src/Monthly/MonthlyCalendar.tsx b/src/Monthly/MonthlyCalendar.tsx
@@ -59,14 +59,17 @@ export const MonthlyNav = () => {
   let { locale, currentMonth, onCurrentMonthChange } = useMonthlyCalendar();
 
   return (
-    <div className="flex justify-end mb-4">
+    <div className="rc-flex rc-justify-end rc-mb-4">
       <button
         onClick={() => onCurrentMonthChange(subMonths(currentMonth, 1))}
-        className="cursor-pointer"
+        className="rc-cursor-pointer"
       >
         Previous
       </button>
-      <div className="ml-4 mr-4 w-32 text-center" aria-label="Current Month">
+      <div
+        className="rc-ml-4 rc-mr-4 rc-w-32 rc-text-center"
+        aria-label="Current Month"
+      >
         {format(
           currentMonth,
           getYear(currentMonth) === getYear(new Date()) ? 'LLLL' : 'LLLL yyyy',
@@ -75,7 +78,7 @@ export const MonthlyNav = () => {
       </div>
       <button
         onClick={() => onCurrentMonthChange(addMonths(currentMonth, 1))}
-        className="cursor-pointer"
+        className="rc-cursor-pointer"
       >
         Next
       </button>

diff --git a/src/Monthly/MonthlyEventItems.tsx b/src/Monthly/MonthlyEventItems.tsx
@@ -15,10 +15,10 @@ export const DefaultMonthlyEventItem = ({
   date,
 }: DefaultEventItemProps) => {
   return (
-    <li className="py-2">
-      <div className="flex text-sm flex-1 justify-between">
-        <h3 className="font-medium">{title}</h3>
-        <p className="text-gray-500">{date}</p>
+    <li className="rc-py-2">
+      <div className="rc-flex rc-text-sm rc-flex-1 rc-justify-between">
+        <h3 className="rc-font-medium">{title}</h3>
+        <p className="rc-text-gray-500">{date}</p>
       </div>
     </li>
   );

diff --git a/src/Weekly/WeeklyCalendar.tsx b/src/Weekly/WeeklyCalendar.tsx
@@ -61,7 +61,7 @@ type WeeklyContainerProps = {
   children: ReactNode;
 };
 export const WeeklyContainer = ({ children }: WeeklyContainerProps) => {
-  return <div className="md:flex md:justify-between">{children}</div>;
+  return <div className="md:rc-flex md:rc-justify-between">{children}</div>;
 };
 
 type DayButtonProps = {
@@ -75,17 +75,17 @@ const DayButton = ({ day }: DayButtonProps) => {
   return (
     <li
       onClick={() => changeSelectedDay(isSelected ? undefined : currentDate)}
-      className="bg-white cursor-pointer"
+      className="rc-bg-white rc-cursor-pointer"
       aria-label="Day of Week"
     >
       <div
-        className={`rounded-lg border sm:w-36 text-center py-4 ${
+        className={`rc-rounded-lg rc-border sm:rc-w-36 rc-text-center rc-py-4 ${
           isSelected
-            ? 'border-indigo-600'
-            : 'border-gray-300 hover:border-gray-500'
+            ? 'rc-border-indigo-600'
+            : 'rc-border-gray-300 hover:rc-border-gray-500'
         }`}
       >
-        <p className="font-medium text-sm text-gray-800">
+        <p className="rc-font-medium rc-text-sm rc-text-gray-800">
           {day.label} {format(currentDate, 'do', { locale })}
         </p>
       </div>
@@ -107,7 +107,7 @@ export const WeeklyDays = ({ omitDays }: WeeklyDaysProps) => {
     );
   }
   return (
-    <ul className="grid md:grid-cols-1 grid-cols-2 gap-2">
+    <ul className="rc-grid md:rc-grid-cols-1 rc-grid-cols-2 rc-gap-2">
       {daysToRender.map(day => (
         <DayButton key={day.day} day={day} />
       ))}
@@ -137,8 +137,8 @@ export function WeeklyBody<EventItem>({
 }: WeeklyBodyProps<EventItem>) {
   let { week, selectedDay } = useWeeklyCalendar();
   return (
-    <div className="overflow-auto max-h-96" style={style}>
-      <ul className="divide-y divide-gray-200 ">
+    <div className="rc-overflow-auto rc-max-h-96" style={style}>
+      <ul className="rc-divide-y rc-divide-gray-200 ">
         {events.map(item => {
           // If they select a single day, filter out events for different days
           if (selectedDay) {
@@ -163,5 +163,9 @@ export const WeeklyResponsiveContainer = ({
 }: {
   children: ReactNode;
 }) => {
-  return <div className="border p-4 md:w-3/4 lg:w-1/2 w-full">{children}</div>;
+  return (
+    <div className="rc-border rc-p-4 md:rc-w-3/4 lg:rc-w-1/2 rc-w-full">
+      {children}
+    </div>
+  );
 };
diff --git a/src/Weekly/WeeklyEventItems.tsx b/src/Weekly/WeeklyEventItems.tsx
@@ -15,10 +15,10 @@ export const DefaultWeeklyEventItem = ({
   date,
 }: DefaultWeeklyEventItemProps) => {
   return (
-    <li className="py-4 w-72">
-      <div className="text-sm flex justify-between">
-        <h3 className="font-medium">{title}</h3>
-        <p className="text-gray-500">{date}</p>
+    <li className="rc-py-4 rc-w-72">
+      <div className="rc-text-sm rc-flex rc-justify-between">
+        <h3 className="rc-font-medium">{title}</h3>
+        <p className="rc-text-gray-500">{date}</p>
       </div>
     </li>
   );

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,4 +1,8 @@
 module.exports = {
+  prefix: 'rc-',
+  corePlugins: {
+    preflight: process.env.TW_PREFLIGHT == 'false' ? false : true,
+  },
   purge: {
     content: ['./src/**/*.tsx'],
     options: {

diff --git a/tw-check.js b/tw-check.js
@@ -0,0 +1,25 @@
+let localDir = __dirname;
+let installedDir = process.env.INIT_CWD;
+
+const fs = require('fs');
+
+let check = () => {
+  if (localDir === installedDir) return;
+
+  //if they are not using tailwind return early
+  if (!fs.existsSync(`${installedDir}/tailwind.config.js`))
+    return console.log('no tw');
+
+  const files = [
+    'react-calendar.cjs.development.js',
+    'react-calendar.cjs.production.min.js',
+    'react-calendar.esm.js',
+  ];
+
+  for (let file of files) {
+    let filePath = `${localDir}/dist/${file}`;
+    let contents = fs.readFileSync(filePath, { encoding: 'utf8' });
+    fs.writeFileSync(filePath, contents.replace(/rc-/g, ''));
+  }
+};
+check();