npx degit solidjs/templates/js my-appnpm or yarn or pnpm.cd my-app
npm install # or yarn or pnpmnpm install -D tailwindcss@latest postcss@latest autoprefixer@latesttailwind.config.js and postcss.config.js files:npx tailwindcss init -ptailwind.config.js and postcss.config.js.tailwind.config.js file and update the purge property to include the path to our src folder and index.html file.module.exports = {
purge: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}@tailwind directive within our entry CSS file:/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;./src/index.js file:import { render } from "solid-js/web";
import "./index.css";
import App from "./App";
render(() => <App />, document.getElementById("root"));npm run dev, Tailwind CSS will be ready to use in your Solid and Vite project.
wobsoriano
/
vite-solid-tailwind-starter
Inspired by posva's vite-tailwind-starter
Note if you have access to Tailwind UI, you can follow the following steps to add it:
@tailwindcss/ui:yarn add @tailwindcss/ui
tailwind.config.js without changing anything else:// tailwind.config.js
module.exports = {
// ...
// rest of the config
plugins: [require('@tailwindcss/ui')],
}
yarn
yarn dev
yarn build
35