Enable Tailwind CSS

Author: morewings

.github/workflows/pull-request-jobs.yml

@@ -5,7 +5,7 @@ name: Node.js CI
 
 on:
   pull_request:
-    branches: [ master ]
+    branches: ["master", "tailwind"]
 
 jobs:
   lint-test:

.nvmrc

@@ -1 +1 @@
-20
+v20

.stylelintrc

@@ -15,7 +15,15 @@
     "at-rule-no-vendor-prefix": true,
     "selector-no-vendor-prefix": true,
     "max-nesting-depth": 3,
-    "selector-max-compound-selectors": 5
+    "selector-max-compound-selectors": 5,
+    "at-rule-no-unknown": [
+      true,
+      {
+        "ignoreAtRules": [
+          "tailwind"
+        ]
+      }
+    ]
   },
   "plugins": [
     "stylelint-order"

eslint.config.js

@@ -13,11 +13,13 @@ import configReactJSXRuntime from 'eslint-plugin-react/configs/jsx-runtime.js';
 import pluginReactHooks from 'eslint-plugin-react-hooks';
 import {fixupPluginRules} from '@eslint/compat';
 import configPrettierRecommended from 'eslint-plugin-prettier/recommended';
+import tailwindPlugin from 'eslint-plugin-tailwindcss';
 
 export default [
     eslint.configs.recommended,
     ...eslintTS.configs.recommended,
     ...eslintTS.configs.stylistic,
+    ...tailwindPlugin.configs['flat/recommended'],
     configReactRecommended,
     configReactJSXRuntime,
     configPrettierRecommended,

generate-react-cli.json

@@ -16,7 +16,6 @@
       "withHookTest": true,
       "customTemplates": {
         "component": "templates/Component/TemplateName.tsx",
-        "style": "templates/Component/TemplateName.module.css",
         "story": "templates/Component/TemplateName.stories.tsx",
         "index": "templates/Component/index.ts",
         "mdx": "templates/Component/TemplateName.mdx",

package.json

@@ -91,6 +91,7 @@
     "eslint-plugin-react-refresh": "0.4.19",
     "eslint-plugin-ssr-friendly": "1.3.0",
     "eslint-plugin-storybook": "0.11.3",
+    "eslint-plugin-tailwindcss": "3.17.5",
     "generate-react-cli": "8.4.9",
     "husky": "9.1.7",
     "identity-obj-proxy": "3.0.0",
@@ -110,6 +111,7 @@
     "stylelint-config-standard": "36.0.1",
     "stylelint-order": "6.0.4",
     "stylelint-prettier": "5.0.3",
+    "tailwindcss": "3.4.17",
     "ts-jest": "29.2.6",
     "ts-node": "10.9.2",
     "typescript": "5.8.2",

pnpm-lock.yaml

@@ -0,0 +1,6 @@
+export default {
+    plugins: {
+        tailwindcss: {},
+        'postcss-preset-env': {},
+    },
+};

postcss.config.js

@@ -2,7 +2,6 @@ import type {FC} from 'react';
 import {useEffect} from 'react';
 import {throttle} from 'lodash';
 
-import classes from './Counter.module.css';
 import useLogic from './useLogic';
 
 export type Props = {
@@ -21,9 +20,12 @@ export const Counter: FC<Props> = ({initialValue = 0}) => {
     }, []);
 
     return (
-        <div className={classes.counter}>
-            <h2 className={classes.header}>Counter</h2>
-            <button className={classes.button} type="button" onClick={incrementCount}>
+        <div className="w-60 border border-slate-300 p-6 text-center">
+            <h2 className="mb-3 text-2xl">Counter</h2>
+            <button
+                className="mb-6 rounded-lg bg-teal-600 px-6 py-3 text-base text-white drop-shadow-md active:relative active:left-0.5 active:top-0.5 active:drop-shadow-none"
+                type="button"
+                onClick={incrementCount}>
                 Increment by one
             </button>
             <div>

src/lib/CounterDemo/Counter.module.css

@@ -2,11 +2,16 @@
 
 exports[`lib > Counter renders without crashing 1`] = `
 <DocumentFragment>
-  <div>
-    <h2>
+  <div
+    class="w-60 border border-slate-300 p-6 text-center"
+  >
+    <h2
+      class="mb-3 text-2xl"
+    >
       Counter
     </h2>
     <button
+      class="mb-6 rounded-lg bg-teal-600 px-6 py-3 text-base text-white drop-shadow-md active:relative active:left-0.5 active:top-0.5 active:drop-shadow-none"
       type="button"
     >
       Increment by one

src/lib/CounterDemo/Counter.tsx

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/lib/CounterDemo/__snapshots__/Counter.spec.tsx.snap

@@ -1 +1,3 @@
+import './index.css';
+
 export {Counter} from './CounterDemo';

src/lib/index.css

@@ -0,0 +1,10 @@
+// const defaultTheme = require('tailwindcss/defaultTheme');
+
+/** @type {import('tailwindcss').Config} */
+export default {
+    content: ['./index.html', './src/**/*.tsx'],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+};

src/lib/index.ts

@@ -2,7 +2,6 @@ import type {FC} from 'react';
 import {useEffect} from 'react';
 import {throttle} from 'lodash';
 
-import classes from './TemplateName.module.css';
 import useLogic from './useLogic';
 
 export type Props = {
@@ -20,9 +19,12 @@ export const TemplateName: FC<Props> = ({initialValue = 0}) => {
         runner();
     }, []);
     return (
-        <div className={classes.templateName}>
-            <h2 className={classes.header}>Counter</h2>
-            <button className={classes.button} type="button" onClick={incrementCount}>
+        <div className="w-60 border border-slate-300 p-6 text-center">
+            <h2 className="mb-3 text-2xl">Counter</h2>
+            <button
+                className="mb-6 rounded-lg bg-teal-600 px-6 py-3 text-base text-white drop-shadow-md active:relative active:left-0.5 active:top-0.5 active:drop-shadow-none"
+                type="button"
+                onClick={incrementCount}>
                 Increment by one
             </button>
             <div>

tailwind.config.js

@@ -5,7 +5,6 @@ import react from '@vitejs/plugin-react';
 import hq from 'alias-hq';
 import external from '@yelo/rollup-node-external';
 import dts from 'vite-plugin-dts';
-import postcssPresetEnv from 'postcss-preset-env';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -39,8 +38,5 @@ export default defineConfig({
         modules: {
             localsConvention: 'camelCase',
         },
-        postcss: {
-            plugins: [postcssPresetEnv({stage: 1})],
-        },
     },
 });