noPiX_for_Tailwind/welcome.html at main · isSpicyCode/noPiX_for_Tailwind · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="../src/output.css" rel="stylesheet">
  <title>NoPiX for Tailwind</title>
</head>
<body class="bg-black text-zinc-100 font-sans min-h-screen overflow-auto flex justify-center items-start mt-5rem">
  <div class="max-w-7xl w-full flex justify-center items-start flex-col md:flex-row ml-2rem mr-2rem gap-4">
    <!-- Main Section -->
    <div class="box flex-1 bg-[#222222c5] p-3rem rounded-2xl border-2 border-solid border-[#363636]">
      <h1 class="text-5xl font-bold mb-4">No<span class="text-[#ffa200]">PiX</span> <span class="font-extralight">for Tailwind</span></h1>
      <h2 class="text-2xl text-zinc-400 mb-8">Use arbitrary values with 1rem = 10px</h2>

      <!-- Getting Started -->
      <h3 class="text-3xl font-semibold mb-4">Getting Started</h3>
      <p class="mb-4">After installation, your NoPiX Tailwind project includes the following subdirectories and files:</p>
      <ul class="list-disc list-outside pl-2rem space-y-3 mb-8">
        <li><strong class="text-[#ffa200]">src/</strong>: Contains configuration and style files.</li>
        <li><strong class="text-[#ffa200]">src/input.css</strong>: Input file for TailwindCSS.</li>
        <li><strong class="text-[#ffa200]">src/output.css</strong>: CSS file generated by TailwindCSS.</li>
        <li><strong class="text-[#ffa200]">src/nopix_theme.css</strong>: File containing theme variables (e.g., --1rem: 10px).</li>
        <li><strong class="text-[#ffa200]">src/nopix_prefix.css</strong>: File containing generated utilities.</li>
        <li><strong class="text-[#ffa200]">src/nopix_script.js</strong>: Script to synchronize HTML classes with CSS files.</li>
        <li><strong class="text-[#ffa200]">src/prefixes.js</strong>: File defining supported prefixes and properties.</li>
      </ul>

      <!-- Changelog -->
      <h3 class="text-3xl font-semibold mb-2rem">Changelog</h3>
      <ul class="list-disc space-y-3 list-outside pl-2rem">
        <li><strong class="text-[#ffa200]">v1.5</strong>: Added support for scanning all HTML files in all directories, improved class parsing for rem-based values (e.g., <code class="text-[#ffa200] bg-stone-800 px-2 py-1 rounded">text-3rem</code>, <code class="text-[#ffa200] bg-stone-800 px-2 py-1 rounded">p-1.7rem</code>).</li>
        <li><strong class="text-[#ffa200]">v1.4</strong>: Added <code class="text-[#ffa200] bg-stone-800 px-2 py-1 rounded">requiresRemAdjustment</code> in prefixes.js to differentiate properties requiring rem conversion, renamed to "NoPiX Tailwind".</li>
        <li><strong class="text-[#ffa200]">v1.3</strong>: Extended prefixes.js with new Tailwind properties supporting arbitrary values (translate-, rotate-, etc.).</li>
        <li><strong class="text-[#ffa200]">v1.2</strong>: Added error handling for file access (e.g., tellcss_prefix.css → nopix_prefix.css) with asynchronous writing.</li>
        <li><strong class="text-[#ffa200]">v1.1</strong>: Fixed a bug in nopix_script.js to avoid redundant variables (e.g., --fontSize-3 and --fontSize-3rem).</li>
        <li><strong class="text-[#ffa200]">v1.0</strong>: Initial version with basic support for rem-based classes (text-, p-, m-, etc.).</li>
      </ul>
    </div>

    <!-- Step-by-Step Guide -->
    <div class="box md:w-1/3 bg-[#222222c5] p-3rem rounded-2xl border-2 border-solid border-[#363636]">
      <h3 class="text-3xl font-semibold mb-1.6rem">Step-by-Step Guide</h3>
      <p class="mb-4">Follow these steps to set up your NoPiX Tailwind project with Node.js:</p>
      <ol class="list-decimal list-inside space-y-6">
        <li>Ensure Node.js is installed on your machine. Download it from <a href="https://nodejs.org/" class="text-[#ffa200] hover:underline">nodejs.org</a> if needed.</li>
        <li>Open a terminal in your project directory (where package.json is located).</li>
        <li>Install dependencies by running: <br><code class="text-[#ffa200] bg-stone-800 px-2 py-1 rounded">npm install</code></li>
        <li>Run the generation and watch script with: <br><code class="text-[#ffa200] bg-stone-800 px-2 py-1 rounded">npm run nopix</code></li>
        <li>Modify your HTML files (e.g., welcome.html or any HTML file in any directory) to add NoPiX Tailwind classes (e.g., <code class="text-[#ffa200] bg-stone-800 px-2 py-1 rounded">text-3rem</code>, <code class="text-[#ffa200] bg-stone-800 px-2 py-1 rounded">p-1.7rem</code>). <strong>Important:</strong> Ensure the <code class="text-[#ffa200] bg-stone-800 px-2 py-1 rounded">&lt;link&gt;</code> tag points to <code class="text-[#ffa200] bg-stone-800 px-2 py-1 rounded">src/output.css</code>. For files at the root (e.g., welcome.html), use <code class="text-[#ffa200] bg-stone-800 px-2 py-1 rounded">&lt;link href="src/output.css" rel="stylesheet"&gt;</code>. For files in subdirectories (e.g., components/index.html), use <code class="text-[#ffa200] bg-stone-800 px-2 py-1 rounded">&lt;link href="../src/output.css" rel="stylesheet"&gt;</code>. With Vite, use <code class="text-[#ffa200] bg-stone-800 px-2 py-1 rounded">&lt;link href="/src/output.css" rel="stylesheet"&gt;</code>. Always adjust the path based on the file's location!</li>
        <li>The <code class="text-[#ffa200] bg-stone-800 px-2 py-1 rounded">nopix_theme.css</code> and <code class="text-[#ffa200] bg-stone-800 px-2 py-1 rounded">nopix_prefix.css</code> files will automatically update on each modification.</li>
        <li>Open your HTML files in a browser (preferably via a server like Vite) to see the results.</li>
      </ol>
    </div>
  </div>
</body>
</html>