This content originally appeared on DEV Community and was authored by Robert
Here's a quick guide on setting up Tailwind in your Solid project.
First, generate a Solid + Vite app if you don’t have one set up already.
npx degit solidjs/templates/js my-app
Navigate to the project directory and install the dependencies using npm or yarn or pnpm.
cd my-app
npm install # or yarn or pnpm
Next, we'd need to install tailwind and its dependencies (PostCSS & autoprefixer).
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Next, generate your tailwind.config.js and postcss.config.js files:
npx tailwindcss init -p
This will create two files in your root directory: tailwind.config.js and postcss.config.js.
Open the 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: [],
}
Next, we’ll import Tailwind’s styles using the @tailwind directive within our entry CSS file:
/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Finally, ensure your CSS file is being imported in your ./src/index.js file:
import { render } from "solid-js/web";
import "./index.css";
import App from "./App";
render(() => <App />, document.getElementById("root"));
You're finished! Now when you run npm run dev, Tailwind CSS will be ready to use in your Solid and Vite project.
Here's a Vite + Solid + Tailwind starter with Routing configured for you:
wobsoriano
/
vite-solid-tailwind-starter
Starter using Vite + Solid + Tailwind CSS
Vite + Solid + Tailwind CSS 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:
- Install
@tailwindcss/ui:
yarn add @tailwindcss/ui
- Add the plugin in
tailwind.config.jswithout changing anything else:
// tailwind.config.js
module.exports = {
// ...
// rest of the config
plugins: [require('@tailwindcss/ui')],
}
Installation
yarn
Development
yarn dev
Build
yarn build
This content originally appeared on DEV Community and was authored by Robert
Robert | Sciencx (2021-07-03T04:48:57+00:00) Install Tailwind CSS in Solid and Vite. Retrieved from https://www.scien.cx/2021/07/03/install-tailwind-css-in-solid-and-vite/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.